单行和多行省略必须拆成两个独立@mixin，因底层机制不同：单行依赖white-space:nowrap+text-overflow，多行依赖-webkit-box+-webkit-line-clamp，混用会导致safari等浏览器失效。
直接结论：单行和多行省略必须拆成两个独立 @mixin，不能靠一个参数切换逻辑——否则在 Safari、旧 Android WebView 或 Firefox 中必然失效。
单行省略用 text-overflow: ellipsis 就够了，但 display 和 white-space 不能错
单行省略本质是强制不换行 + 截断显示，核心就三条声明，缺一不可：
-
overflow: hidden—— 没它，文字直接溢出容器 -
white-space: nowrap—— 必须禁用换行，否则text-overflow不触发 -
text-overflow: ellipsis—— 省略号本体，-ms-text-overflow已可忽略（IE 已淘汰）
注意：display 必须是 block 或 inline-block；如果父级是 flex 且子元素没设 width 或 flex: 0 0 auto，nowrap 可能被拉伸失效。推荐写法：
@mixin singleEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
多行省略必须用 -webkit-line-clamp 三件套，且要 @supports 包裹
只写 -webkit-line-clamp: 2 是没用的——它必须和另外三个声明共存，且仅在 WebKit 内核下生效：
-
display: -webkit-box—— 不是flex，不是grid，必须是这个旧版弹性盒 -
-webkit-box-orient: vertical—— 方向必须为vertical，漏掉就退化成单行 -
overflow: hidden—— 同样必要，否则截不断
Autoprefixer 默认会删掉 -webkit-line-clamp，所以整个块得加注释控制：
/* autoprefixer: off */
@mixin multiEllipsis($lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
}
更稳妥的做法是用 @supports 提供降级（比如靠 max-height + line-height 粗略控制）：
@mixin truncateLines($lines: 2, $lh: 1.4em) {
line-height: $lh;
max-height: $lines * $lh;
overflow: hidden;
<p>@supports (-webkit-line-clamp: 1) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
max-height: none;
}
}</p>
调用时容器必须满足三个硬性条件，否则 mixin 再对也白搭
就算 SCSS 写得完全正确，以下三点任一不满足，省略就会失效或错位：
- 容器必须有明确宽度约束：
width、max-width，或在flex布局中设flex: 1/flex: 0 0 200px等可计算尺寸 - 容器不能已有
display: flex或display: grid—— 会与display: -webkit-box冲突，常见于 Ant Design 的.ant-table-cell，需额外包一层div并重置display - 必须避免
text-align: justify—— WebKit 下省略号可能被挤到行外，视觉上消失
为什么不能只用一个 mixin 切换单/多行？
因为底层机制完全不同：
- 单行靠
white-space: nowrap阻止换行，再用text-overflow截断 - 多行靠
-webkit-box+-webkit-line-clamp计算行高并截断，white-space反而要设为默认值（允许换行）
试图用 @if $lines == 1 在同一个 mixin 里分支，会导致编译后 CSS 混合两种逻辑——比如多行分支里残留 white-space: nowrap，结果文字根本换不了行；或者单行分支里误加 display: -webkit-box，破坏原有布局。真实项目里，这种“通用”写法上线后常在 iOS Safari 上突然不省略，排查起来极耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
