-webkit-line-clamp在移动端可行但仅限webkit/blink内核浏览器；必须同时设置display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden；需父容器有max-height且避免margin干扰，兼容性fallback推荐js检测+高度截断。
移动端用 -webkit-line-clamp 实现多行省略号，可行但有明确边界——只在 WebKit 内核浏览器（iOS Safari、Chrome Android、微信 WebView 等）中可靠生效，Firefox 和旧版 UC、QQ 浏览器可能完全不识别。
为什么 -webkit-line-clamp 在移动端“看起来很稳”
因为绝大多数主流移动端浏览器底层都基于 WebKit 或 Blink（Blink 是 WebKit 衍生），而 -webkit-line-clamp 是 WebKit 原生支持的私有属性，配合 display: -webkit-box 就能真正按行数截断并加省略号。
- 它不是 JS 计算、不依赖字体渲染时机，纯 CSS 渲染阶段完成，性能好
- 不需要预估字符数或像素高度，语义清晰：“就显示 3 行，超了就省略”
- 相比后台截字或 canvas measureText，前端控制更灵活，适配响应式宽度变化
-webkit-line-clamp 必须配齐的三个条件
漏掉任意一个，效果就失效——常见错误是只写了 -webkit-line-clamp: 3，其他全靠猜。
-
display: -webkit-box：必须声明，否则-webkit-line-clamp不起作用 -
-webkit-box-orient: vertical：必须设为vertical，水平方向（horizontal）下该属性无效 -
overflow: hidden：必须存在，否则溢出内容仍可见，省略号也不会出现
完整最小可用写法：
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
兼容性 fallback 怎么做才不翻车
当用户用 Firefox for Android 或某些定制 ROM 自带浏览器时，-webkit- 前缀全失效，此时若没兜底，文本会全部展开撑开布局。不要寄希望于 @supports 检测 line-clamp——它对私有属性支持极差。
- 最务实的做法：用 JS 检测是否支持
lineClamp（查getComputedStyle(el).webkitLineClamp是否可读）再决定是否启用 fallback 截字逻辑 - 简单项目可直接加一层 JS 截取：按容器
offsetHeight反推当前最多容纳几行，再用textContent截断 +…，但注意中英文混排时字符宽度不一致，建议按 DOM 渲染后实际高度判断 - 避免用
text-overflow: ellipsis单独配多行——它只对单行有效，多行下完全无反应
容易被忽略的布局陷阱
-webkit-line-clamp 对父容器和子元素有隐式要求，稍不注意就白写。
- 父元素必须有**确定的高度限制或最大高度**（
max-height更安全），否则即使写了line-clamp: 2，也可能显示 5 行 - 子元素不能有
margin-bottom累加导致实际高度溢出；行高（line-height）需稳定，避免因字号缩放或字体加载造成行数错判 - 慎用
flex容器直接套-webkit-box：部分安卓 WebView 下display: flex和display: -webkit-box同时存在时行为异常，建议外层 flex，内层单独 div 套 clamp 样式
真正难的从来不是写对那三行 CSS，而是让这三行在各种屏幕缩放、字体加载延迟、WebView 版本碎片化下依然稳定输出指定行数——这需要 layout 触发时机、字体就绪监听、以及 fallback 的双重兜底意识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
