line-clamp需配合-webkit-box生效，真机iOS Safari 15.4–16.3存在省略异常，根本原因是剪裁上下文断裂；必须同元素设display:-webkit-box、-webkit-box-orient:vertical和overflow:hidden，且依赖max-height与固定line-height。
line-clamp 能用，但必须和 -webkit-box 一起配着用，单独写 line-clamp: 2 没效果；真机 iOS Safari 在 15.4–16.3 版本里会少截一行或省略号错位，不是你代码写错了。
为什么写了 line-clamp 却没省略号？
根本原因不是属性没生效，而是剪裁上下文断了。浏览器只在特定渲染路径下才识别 line-clamp 的截断意图。
-
display: -webkit-box和-webkit-box-orient: vertical缺一不可——flex或grid容器里加line-clamp直接被忽略 -
overflow: hidden必须写在**同一个元素**上，祖先层设了hidden，中间某层是overflow: visible或auto，就等于开了后门，文字照样溢出 - 容器没设
max-height或固定高度，line-clamp可能不触发——它依赖布局高度计算行数，不是纯逻辑控制 -
text-overflow: ellipsis对多行无效，加了也不起作用，别混用
-webkit-line-clamp 和标准 line-clamp 能不能混写？
不能。目前（2026年4月）标准 line-clamp 仍处于 CSS Overflow Module Level 4 草案阶段，所有主流浏览器实际支持的仍是 -webkit-line-clamp。
- 同时写
-webkit-line-clamp: 3和line-clamp: 3，现代浏览器只认前者；Firefox 完全不认两者，需 JS 降级 - 写成
line-clamp: 3单独一行，在 Chrome/Safari/Edge 中会被静默忽略，不报错也不生效 - 前缀版已足够稳定，iOS 14+、Android Chrome、桌面端新版浏览器全覆盖，没必要等标准落地再用
移动端 iOS Safari 省略异常怎么临时绕过？
iOS 15.4–16.3 的 WebKit 存在字形换行计算 bug，尤其中英文混排时，-webkit-line-clamp 可能漏截或省略号消失——模拟器测不出来，必须真机验证。
立即学习“前端免费学习笔记（深入）”；
- 加
word-break: break-word或overflow-wrap: break-word，强制软换行，减少跨行判断误差 - 放弃自动省略号，改用
max-height+ 固定line-height+overflow: hidden组合，至少能稳定截断（比如line-height: 1.4em× 3 行 =max-height: 4.2em） - 避免在
line-clamp元素内嵌套inline标签（如<span></span>、<em></em>），它们可能干扰行盒生成
要不要为 Firefox 写 JS 降级？
要，但别一上来就写整套高度测量逻辑。先看场景：
- 如果内容长度相对固定（比如商品标题最多 30 字），直接服务端截断 + 单行
text-overflow: ellipsis更轻量 - 如果必须动态多行，用
getBoundingClientRect().height对比目标行高，比用scrollHeight更准——后者受 padding、border 影响大 - 别在
resize事件里高频重算，加节流；更推荐监听字体加载完成（document.fonts.ready）后再初始化截断
最常被忽略的一点：line-height 不固定时，哪怕只差 0.05em，iOS 上就可能少截一行。别信“差不多”，该设 line-height: 1.4 就别写 1.42。
