-webkit-line-clamp需与display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden三者配合才生效，缺一不可；Firefox 68+已支持，IE完全不支持，移动端iOS Safari 15.4+在sticky或transform父容器中可能静默失效。
-webkit-line-clamp 是目前最常用、最轻量的多行省略方案，但它**只在 WebKit/Blink 内核浏览器中可靠生效**（Chrome、Safari、Edge 79+），Firefox 68+ 也已支持，但 IE 完全不支持。
为什么 -webkit-line-clamp 常常不生效
这不是属性写错，而是漏掉了三个强制配套项。单独写 -webkit-line-clamp: 2 没有任何效果：
-
display: -webkit-box必须设置，否则-webkit-line-clamp被忽略 -
-webkit-box-orient: vertical必须显式声明，缺省值不是vertical -
overflow: hidden必须存在，否则溢出内容仍可见，省略号无从触发 - 容器不能是
inline元素（如<span></span>），需为block或inline-block
-webkit-line-clamp 的行高与高度关系
它按“行数”截断，而非“像素高度”。这意味着：
- 若设
-webkit-line-clamp: 3，但每行line-height: 1.5且字体大小为14px，实际占用高度约3 × 1.5 × 14 = 63px（不含 margin/padding） - 如果容器
height设得比这个计算值还小，可能提前裁切、文字被压扁，甚至省略号消失 - 更稳妥的做法是：**不设固定
height，只靠max-height配合overflow: hidden做兜底**，避免和-webkit-line-clamp冲突
Firefox 和旧 Edge 的兼容 fallback 怎么写
没有纯 CSS 的跨浏览器多行省略方案。若必须兼容 Firefox ≤67 或 IE，只能降级处理：
- 对非 WebKit 浏览器，用
@supports not (-webkit-line-clamp: 1)包裹降级样式 - 常见 fallback 是「伪元素遮罩 + 绝对定位省略号」，但需手动控制
line-height和height，且无法响应字体缩放或 zoom 变化 - 真正健壮的方案是 JS 截断（例如用
element.textContent+ 二分查找 +getBoundingClientRect()判断是否溢出），但会增加首屏 JS 体积和重排开销
移动端 iOS Safari 的一个隐藏坑
iOS 15.4+ 开始，-webkit-line-clamp 在 position: sticky 或 transform 祖先元素内可能失效。表现为：文字显示完整，无省略号。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：给目标元素加
transform: translateZ(0)强制触发硬件加速层 - 根本解法：避免将
-webkit-line-clamp元素嵌套在position: sticky或含transform的父容器中 - 这个 bug 不报错、不警告，只静默失效 —— 很容易被漏测
-webkit-line-clamp 看似简单，但它的生效链条极脆弱：少一个声明、父容器动一个 transform、浏览器版本差一丁点，就可能白写。真正在意兼容性时，别只信 demo 能跑通，要拿真实设备 + 真实用户环境去压测。 
