<p>Autoprefixer默认删除非标准属性，-webkit-line-clamp需用/ autoprefixer: off /注释保留；必须配合display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden四条声明，且容器需有宽度约束、禁用flex/grid、推荐设置line-height和font-size。</p>
为什么直接写 -webkit-line-clamp 会失效
Autoprefixer 默认会删掉所有非标准属性，-webkit-line-clamp 正属于这一类。哪怕你在 SCSS 里写得再完整，只要没加控制指令，编译后这行就没了。
必须用注释显式跳过：在 mixin 定义前加 /* autoprefixer: off */，整块样式才会原样保留。只忽略下一行用 /* autoprefixer: ignore next */，但对 -webkit-line-clamp 来说，整个声明块都依赖 WebKit 前缀，所以前者更稳妥。
常见错误现象：
- SCSS 编译后 CSS 里完全找不到
-webkit-line-clamp - 浏览器开发者工具里看到
display: -webkit-box，但省略不生效——八成是前缀被删了
@mixin multiEllipsis($lines: 2) 必须包含的四条声明
少一条都会导致行为异常，不是截断错位就是省略号不显示。
立即学习“前端免费学习笔记（深入）”；
这四条是硬性组合：
-
display: -webkit-box—— 启用旧版弹性盒模型，-webkit-line-clamp只在此模型下有效 -
-webkit-box-orient: vertical—— 必须设为vertical，否则-webkit-line-clamp被忽略 -
-webkit-line-clamp: $lines—— 行数由参数控制，不能写死 -
overflow: hidden—— 配合触发截断，text-overflow: ellipsis在多行场景下只是视觉补全，非必需但建议保留
注意：text-overflow: ellipsis 对多行本身无效，但它能让最后一行末尾的省略号更稳定（尤其在某些 Safari 版本中）。
调用时容器必须满足的三个条件
就算 mixin 写对了，容器不配合照样白搭。
- 必须有明确宽度约束：
width、max-width或在 flex/grid 中受收缩限制（比如flex: 1）；纯display: inline不行 - 不能已有
display: flex或display: grid——display: -webkit-box会与之冲突，布局可能崩坏 - 推荐显式设置
line-height和font-size，否则不同字体下截断位置浮动，省略号可能被裁掉半截
容易踩的坑：在 Ant Design 或 Element Plus 的 .el-table__cell 里直接套用，常因父级已设 display: flex 导致 -webkit-box 失效，此时需额外包裹一层 div 并重置 display。
Firefox 和旧版 Safari 的兼容性怎么兜底
-webkit-line-clamp 在 Firefox 68+ 已支持，但 IE/Edge ≤18 完全不认。不能只靠它赌兼容性。
真正在意兼容性的项目，得做两层：
- 用
@supports (-webkit-line-clamp: 1)包裹 WebKit 方案，避免污染其他浏览器 - fallback 用固定高度 +
overflow: hidden+::after盖省略号背景（需手动算height = $lines × line-height） - 如果允许 JS，优先用
getBoundingClientRect()动态截断——比任何纯 CSS 方案都准，且能处理中英文混排、数字连串等边界 case
最易被忽略的一点：$lines 参数传 1 时，别让它走多行逻辑。应在 mixin 内部加判断，自动降级为单行方案（white-space: nowrap 那套），否则在某些安卓 WebView 下会出现奇怪的换行残留。
