-webkit-line-clamp单独使用无效，必须与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden三者同时声明才生效；缺一即静默失效，且不报错。
line-clamp 不是“设了就生效”的属性，它是一组强耦合 CSS 声明的组合效果，漏掉任一条件都会静默失效——最常被忽略的是 display: -webkit-box 和 overflow: hidden 的显式声明。
为什么只写 -webkit-line-clamp: 2 没用
这个属性本身不独立工作。它必须和三个前提同时存在：display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden。缺一个，浏览器就当它不存在，也不会报错，文字照常全部显示。
-
display必须是-webkit-box，不是flex或grid，哪怕视觉上看起来一样也不行 -
-webkit-box-orient: vertical决定文字按行堆叠方向，写成horizontal就变成单字截断 -
overflow: hidden要在同一个元素上显式写，父级的hidden不会继承到子级截断逻辑中 -
text-overflow: ellipsis对多行无效，写了也没用，别加
@supports 检测比 UA 判断更可靠
Android 4.4–6.0 的 WebView 常假阳性：@supports (-webkit-line-clamp: 1) 返回 true，但实际渲染完全不截断或随机多出一行。iOS Safari（尤其 12–14）在 rem 动态缩放时，-webkit-line-clamp 行数计算会偏移。
- 降级首选
@supports not (line-clamp: 3)或@supports not (-webkit-line-clamp: 3)，比解析 UA 字符串稳定 - 对 iOS rem 场景，把行高单位固定为
em，并加font-size: 1em锁定基准，避免重排触发计算失准 - 真机 WebView 实测不可跳过——Chrome DevTools 模拟器无法复现旧安卓 WebView 的渲染 bug
Firefox 和旧 Safari 的兼容 fallback 怎么写
Firefox 直到 v119（2023 年底）才支持无前缀 line-clamp，iOS Safari 16.4 之前只认 -webkit- 前缀；微信内置 WebView 等安卓环境仍可能忽略该属性。
- 简单 fallback：用
max-height+line-height控制大致高度，例如max-height: 3em; line-height: 1em;，但无法保证精确行数 - 精准 fallback：JS 计算
offsetHeight / lineHeight后截字符 + 插入「…更多」按钮，注意避免重复绑定或多次初始化 - 关键细节：
max-height: none必须在@supports块内覆盖掉降级样式，否则 WebKit 下先按max-height截一次、再按line-clamp截一次，导致末行被切掉半行
Tailwind 用户直接用 @tailwindcss/line-clamp 插件
这个插件不是语法糖，它自动注入完整声明组合，并处理了 @supports 分层、max-height 覆盖、伪元素降级等细节，比手写更稳。
- 安装后即可用
line-clamp-2、line-clamp-3等工具类，无需额外配置 - 它生成的 CSS 包含
display: -webkit-box、-webkit-line-clamp、overflow: hidden全套，且已规避text-overflow: ellipsis冗余写法 - 若项目已用 Tailwind，别自己封装
line-clamp工具类——插件内部做了 Safari/Android WebView 的行为差异适配，手写容易漏
真正麻烦的不是写法，而是它失败时不提示。上线前务必在 iOS Safari、微信安卓 WebView、Firefox 桌面版三端点开真实内容测试，尤其是动态字体大小或响应式容器宽度变化后的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
