text-overflow: ellipsis仅对单行生效，多行需用-webkit-line-clamp等方案；sass mixin用于封装已验证的兼容性声明，如单行@mixin truncate含overflow:hidden、text-overflow:ellipsis、white-space:nowrap，不包含宽度（须调用方指定），且flex子项需加min-width:0；多行@mixin truncate-lines($lines)含display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp:$lines、overflow:hidden，须配合height/max-height，firefox等不支持该属性，sass无法补兼容性。
text-overflow: ellipsis 只对单行生效，多行必须用 -webkit-line-clamp 等方案；Sass 的作用不是突破浏览器限制，而是把已验证有效的声明组合封装成可复用、带参数的 @mixin，避免手写一堆易漏的兼容性前缀。
单行省略必须配齐三个属性
漏掉任意一个都会失效：容器没宽度、white-space: nowrap 缺失、overflow: hidden 没写——全都不显示省略号。
-
@mixin truncate应该只包含overflow: hidden、text-overflow: ellipsis、white-space: nowrap这三条，不包宽度，因为宽度必须由调用方根据上下文决定（比如max-width: 100%或width: 200px） - 在
flex子项上直接用会失效，得额外加min-width: 0防止 flex 基线拉伸撑开容器 - 表格单元格要加
table-layout: fixed，否则white-space: nowrap不起作用
多行省略只能靠 -webkit-line-clamp 封装
Firefox 和旧版 Edge 完全不支持 -webkit-line-clamp，Sass mixin 能做的只是把配套声明打包好，不能补兼容性。
-
@mixin truncate-lines($lines: 2)必须包含：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: $lines、overflow: hidden - 不能和
text-align: justify同时用，WebKit 下省略号位置可能偏移 - 必须配合
height或max-height（比如line-height: 1.5em×$lines），否则容器高度自适应，截断无效
IE11 或强兼容场景下别硬扛 CSS
如果项目明确要求支持 IE11，-webkit-line-clamp 方案直接不可用，此时 Sass mixin 不该静默生成无效样式，而应报 warning 或提供降级占位（比如只设 overflow: hidden + 注释说明）。
- JS 方案（如动态计算高度后截断）能真正跨浏览器生效，但 SSR 渲染时不可见、响应式重算成本高
- Sass mixin 适合内容静态、移动端为主、且能接受 Firefox 下回退为不截断的场景
- 别在用户实时输入的富文本区域用这套，CMS 输出的标题/摘要这类结构化短文本才是目标场景
真正容易被忽略的点是：所有方案都依赖容器有明确尺寸约束，而这个约束从来不是 mixin 能代劳的——它必须由业务层显式提供，且常因父级 flex 或 grid 布局导致隐式宽度失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
