-webkit-line-clamp非标准属性，需配合display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden及明确宽高才生效；firefox68+有限支持，ie全系不支持，复杂布局易失效，推荐@supports检测+max-height降级或伪元素方案。
纯 CSS 多行截断在现代浏览器中基本可用，但必须明确：-webkit-line-clamp 不是标准属性，Firefox 68+ 才开始有限支持，IE 全系不支持，且它对 font-size 变化、line-height 不一致、flex 容器嵌套等场景极其敏感。
-webkit-line-clamp 的正确写法和常见失效原因
很多人直接复制 .clamp { -webkit-line-clamp: 2; } 就以为能用，结果在 Safari 上不生效、在 Firefox 上完全没反应。核心问题在于它不是独立属性，而是一套“组合拳”：
-
display: -webkit-box必须写，不能用display: flex替代（即使视觉一样） -
-webkit-box-orient: vertical缺一不可，漏掉就退化为单行甚至不截断 -
overflow: hidden是触发裁剪的开关，text-overflow: ellipsis在多行下仅对 WebKit 有效，且只在有-webkit-line-clamp时才显示省略号 - 容器必须有明确的
width或max-width，否则-webkit-line-clamp计算行数会失准
SCSS 封装时如何处理跨浏览器降级
用 SCSS 写 mixin 不能只图方便，得把兼容逻辑拆清楚。下面这个封装兼顾了可读性、可配置性和真实兼容需求：
@mixin line-clamp($lines: 2, $lh: 1.5em) {
// 基础降级：靠 max-height + overflow 控制高度
line-height: $lh;
max-height: $lines * $lh;
overflow: hidden;
position: relative;
<p>// WebKit 增强：启用原生截断
@supports (-webkit-line-clamp: 1) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
max-height: none; // 覆盖上面的 max-height，避免双重限制
}</p><p>// Firefox 68+ 支持标准 line-clamp（实验性，需加前缀）
@supports (line-clamp: 2) or (-webkit-line-clamp: 2) {
line-clamp: $lines;
}
}
</p>
注意三点：@supports 检测比 UA 判断更可靠；max-height: none 是关键，否则 WebKit 下会先按 height 截一次、再按 line-clamp 截一次，导致文字被切掉半行；line-clamp 标准属性目前仍需前缀，直接写不生效。
为什么伪元素模拟方案在复杂 UI 中反而更稳
当你的文本容器里有 inline 元素（比如图标、<span></span> 高亮）、或用了 variable font、或父级有 transform，-webkit-line-clamp 很可能直接失效——它对渲染树干扰非常敏感。这时候用伪元素 fallback 更可控：
-
::after的content: "…"必须配合position: absolute和精确的bottom/right偏移 - 背景色必须和容器背景 100% 一致，否则省略号边缘会露白边（用
background-clip: text+color: transparent更安全） - 如果容器有 padding，
::after的right要减去 padding 值，否则省略号会悬空 - 这个方案在 IE11、Firefox 旧版、甚至部分安卓 WebView 中都稳定，代价是省略号位置不如原生精准
真正难的不是写出能跑的代码，而是判断什么时候该放弃 -webkit-line-clamp —— 比如你用了 CSS Container Queries、文本内含 emoji、或者设计稿要求省略号必须严格对齐基线。这些细节不测试到真机，光看文档永远踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
