-webkit-line-clamp不是独立可用属性，必须与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden三者同用才生效；缺一即失效，且不兼容flex/grid、firefox及旧android webview。
直接说结论：-webkit-line-clamp 不是独立可用的属性，它必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 一起写在同一个元素上，缺一不可；否则就是摆设。
为什么写了 -webkit-line-clamp: 2 却没效果
根本不是属性没生效，而是剪裁上下文断了——浏览器只在特定布局路径下才识别截断意图。
-
display: -webkit-box和-webkit-box-orient: vertical缺一不可；写成flex或grid容器的子元素上会直接失效 -
overflow: hidden必须写在同一个元素上；祖先层设了hidden，中间某层是visible或auto，就等于开了后门 - 容器没设
max-height或固定高度，-webkit-line-clamp可能不触发——它依赖布局高度算行数，不是纯逻辑控制 -
text-overflow: ellipsis对多行无效，加了也不起作用，别混用
-webkit-line-clamp 在移动端 iOS Safari 15.4–16.3 真机表现异常
中英文混排时可能少截一行、省略号消失或偏移。模拟器测不出来，必须真机验证。
- 加
word-break: break-word或overflow-wrap: break-word，强制软换行，减少跨行判断误差 - 放弃自动省略号，改用
max-height+ 固定line-height+overflow: hidden组合（例如：两行 ×line-height: 1.4em→max-height: 2.8em） - 避免在
-webkit-line-clamp元素内嵌套<strong></strong>等 inline 标签，它们可能干扰行盒生成
Firefox 和旧版安卓 WebView 怎么兼容
Firefox 118 及更早版本完全不认 -webkit- 前缀；Chrome 125+ 开始支持无前缀 line-clamp，但旧版安卓微信 X5 内核仍不支持。
- 纯 CSS 没通用解法，视觉降级是最轻量方案：对非 WebKit 浏览器只用
max-height+overflow: hidden，不加省略号 - 必须统一表现时，推荐轻量 JS 方案：用
element.scrollHeight > element.clientHeight判断是否溢出，再逐词回退截取，注意用textContent避开 HTML 标签 - 慎用“伪省略”（比如
::after渐变遮罩），深色背景需透明渐变，否则边缘生硬
真正麻烦的从来不是“怎么写”，而是“怎么让不同设备都看起来差不多”。-webkit-line-clamp 是快捷键，不是万能钥匙；一旦内容含中文、emoji 或响应式字号，行数控制就容易失准——这时候，老老实实用 JS 判高度，往往比调一堆 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
