-webkit-line-clamp需搭配display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden三者缺一不可，否则在safari 17.5+等环境失效；firefox及旧android webview需用@supports+max-height降级；css变量无法直接绑定该属性，须通过预设类名或js切换实现动态行数控制。
移动端多行文本截断，-webkit-line-clamp 是首选方案，但必须搭配正确声明和降级逻辑，否则在 Safari 17.5+、Chrome Android 或部分 iOS WebView 中会失效或显示异常。
为什么 -webkit-line-clamp 在移动端有时不生效
常见失效原因不是浏览器不支持，而是布局约束冲突或样式覆盖：
-
display: -webkit-box被后续display: flex或display: grid覆盖（尤其在组件库如 Ant Design、Vant 的 class 里） - 父容器设置了
height或max-height，与-webkit-line-clamp的弹性盒机制冲突 - 字体使用了自定义
@font-face，加载完成前行高未稳定，导致截断行数计算错误 - iOS 17.4+ Safari 对
text-overflow: ellipsis在多行场景下渲染延迟，需额外触发重绘（如加transform: translateZ(0)）
移动端必须写的三行基础样式
不能只写 -webkit-line-clamp，必须同时声明这三项，且顺序不能颠倒：
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：-webkit-box-orient: vertical 不是可选；overflow: hidden 必须存在，否则省略号不出现；text-overflow: ellipsis 在多行下仅对最后一行生效，可加可不加。
如何兼容 Firefox 和旧版 Android WebView
Firefox 移动版（Gecko 内核）默认不启用 layout.css.line-clamp.enabled，旧版 Android WebView（Chrome 61 之前）也不支持。稳妥做法是用 @supports + max-height 降级：
@supports not (-webkit-line-clamp: 2) {
.clamp-2 {
line-height: 1.4em;
max-height: 2.8em; /* 1.4 × 2 */
overflow: hidden;
}
}
关键点：
-
max-height值必须严格等于line-height × 行数，不能取整或估算 - 避免用
rem或%计算max-height，移动端 font-size 动态缩放会导致误差 - 伪元素渐变遮罩（
::after+linear-gradient）在低端 Android 上有性能抖动，慎用于列表项高频渲染场景
动态行数控制的坑：CSS 变量不能直接绑定 -webkit-line-clamp
-webkit-line-clamp 不接受 CSS 变量值，下面写法无效：
.dynamic-clamp {
--lines: 3;
-webkit-line-clamp: var(--lines); /* ❌ 不生效 */
}
正确方式只有两种：
- 服务端或构建时生成对应类名，如
.clamp-1/.clamp-2/.clamp-3 - 运行时用 JS 切换 class，并配合
getComputedStyle(el).webkitLineClamp检测是否生效（注意该属性只读，不能设）
移动端最常被忽略的是：截断后文本点击区域变小，尤其是 line-height 小于 font-size 时，用户实际点击不到文字末尾——建议给容器加 padding-bottom: 0.2em 补偿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
