-webkit-line-clamp生效必须同时满足四条件：display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp为整数、overflow:hidden写在同一元素上，缺一则静默失效。
-webkit-line-clamp 在移动端不是“能用就行”，而是“全对才生效”。漏掉任一条件，iOS Safari 或 Android Chrome 就会静默失效——不报错、不警告、只展示全部文本。
必须写全的四件套（缺一不可）
这不是建议，是 WebKit 渲染引擎的硬性要求。任意一项缺失，-webkit-line-clamp 直接被忽略：
-
display: -webkit-box：不能是flex、grid、block，哪怕父容器用了 flex，该元素自身也得显式声明这个值 -
-webkit-box-orient: vertical：拼写必须准确，不能带引号，不能写成vertical;（末尾分号不算在内） -
-webkit-line-clamp: 2：值必须是整数，不能是2.5、auto或变量 -
overflow: hidden：必须写在**同一个元素上**，祖先设了hidden，中间某层是visible或auto，就等于没设
移动端真机上省略号消失或少截一行？大概率是 iOS 15.4–16.3 的渲染 bug
这不是你代码错了，是 WebKit 层的剪裁上下文断裂，尤其在中英文混排、font-size 动态变化、或用了 rem + vw 动态根字体时。模拟器测不出来，必须真机验证：
- 加
overflow-wrap: break-word强制软换行，减少跨行判断误差 - 放弃
-webkit-line-clamp，改用max-height: 2.8em（假设line-height: 1.4em）+overflow: hidden物理截断 - 避免在该元素内嵌套
<img>、<strong></strong>等 inline 子元素，它们干扰行盒生成
Firefox 和旧版 WebView 怎么兜底？别信 @supports
@supports (line-clamp: 3) 对私有属性返回 false，检测完全不可靠。更稳妥的做法是 JS 运行时检测：
const el = document.createElement('div');
const supported = getComputedStyle(el).webkitLineClamp !== undefined;
如果 supported === false，就走降级逻辑：
- 纯视觉降级：只加
max-height+overflow: hidden，不强求省略号（最轻量） - JS 截断：用
el.scrollHeight > el.clientHeight判断是否溢出，再逐词回退截取，注意用textContent避开 HTML 标签 - 别用伪元素渐变遮罩做“伪省略”，深色背景需透明渐变，否则边缘生硬且可访问性差
真正麻烦的从来不是“怎么写 CSS”，而是“怎么让中文、emoji、动态字号、不同内核都看起来差不多”。-webkit-line-clamp 是快捷键，不是万能钥匙；一旦内容结构复杂或兼容要求高，老老实实用 JS 判高度，往往比调一堆 CSS 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
