单行省略必须用 white-space: nowrap，否则 text-overflow: ellipsis 无效；因默认允许换行，无溢出则不触发省略逻辑，且需容器有明确宽度、非 inline 显示。
单行省略为什么必须用 white-space: nowrap
不加这句，text-overflow: ellipsis 就完全无效。浏览器默认允许换行，一旦文本自动折行，就不存在“溢出容器右边界”这件事，自然不会触发省略号逻辑。
常见错误是只写 overflow: hidden 和 text-overflow: ellipsis，结果没效果——八成是漏了 white-space: nowrap 或者容器没设 width/max-width。
-
white-space: nowrap是硬性前提，不是可选优化 - 容器必须有明确宽度（
width、max-width或 flex/grid 下的收缩约束） - 元素不能是
display: inline（需至少为inline-block或block）
@mixin text-ellipsis-single() 的参数陷阱
这个 mixin 表面简单，但实际使用时容易忽略两个隐性依赖：
- 父容器若用
flex布局，需额外加flex-shrink: 0，否则在空间不足时会被压缩到 0 宽，导致省略失效 - 若文本含
<span></span>等内联子元素，且子元素设置了vertical-align: middle等值，可能引发基线错位，让省略号位置偏高或被裁掉 - 不要在
position: absolute元素上直接套用，它依赖文档流中的块级渲染上下文
多行省略 mixin 中 -webkit-line-clamp 的兼容性补丁怎么加
单纯用 @mixin text-ellipsis-multiple($lines: 2) 在 Firefox 或旧版 Safari 上会彻底失效——它只在 WebKit/Blink 内核生效，且要求 display: -webkit-box 必须存在。
真正可用的方案是组合 fallback：
- 先写标准 fallback：用
height+line-height+overflow: hidden控制行数，再用::after叠加省略号背景遮罩 - 在 mixin 里用
@supports (-webkit-line-clamp: 1)包裹 WebKit 版本，避免污染其他浏览器样式 - 如果项目支持 JS，建议只用 CSS fallback，把精确截断交给
textContent+getBoundingClientRect()动态计算，比纯 CSS 更可靠
SCSS mixin 里要不要自动加浏览器前缀
不用。现代构建工具（如 PostCSS Autoprefixer）已能精准识别 -webkit-line-clamp 等属性并注入前缀，手动在 mixin 里重复写 -moz-、-ms- 不仅冗余，还会干扰 Autoprefixer 的判断逻辑。
更关键的是：-webkit-line-clamp 本身就没有非 WebKit 的等效前缀版本——-moz-line-clamp 从未被实现，硬加只会制造假兼容幻觉。
真正该在 mixin 里处理的，是语义层兼容：比如当 $lines 时自动降级为单行方案，避免传入 <code>1 却仍走多行逻辑导致布局错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
