text-overflow: ellipsis 默认仅对单行生效，因其依赖 white-space: nowrap 和 overflow: hidden，与换行冲突；多行省略需用 -webkit-line-clamp 等方案，sass mixin 用于封装兼容性声明而非突破限制。
text-overflow: ellipsis 只对单行生效？
没错，text-overflow: ellipsis 默认只在单行文本上起作用，强行用在多行上会直接失效——不是截断，而是文字溢出容器、甚至撑破布局。根本原因是它依赖 white-space: nowrap 和 overflow: hidden，而这俩和换行天然冲突。
所以别指望靠一个属性搞定多行省略。Sass 的价值不在“绕过限制”，而在把已知可靠方案（比如基于 -webkit-line-clamp 的方案）封装成可复用、可配置的 @mixin，避免每次复制粘贴一堆带前缀的声明。
用 @mixin 封装单行省略号最简写法
单行省略看似简单，但漏掉任意一条规则都会失败：宽度未设、overflow 不是 hidden、white-space 不是 nowrap…… Sass 封装能强制统一这组联动声明。
@mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }- 必须配合显式宽度（
width或max-width），否则没效果——这点不能由 mixin 代劳，得调用时自己写 - 不要在 flex 子项上直接用，需额外加
min-width: 0防止 flex 基线拉伸破坏截断
多行省略只能靠 -webkit-line-clamp？
目前唯一稳定、无需 JS 的多行截断方案就是 -webkit-line-clamp，但它只是 WebKit 内核私有属性，Firefox 和旧版 Edge 完全不支持。Sass 封装的意义是：把兼容性补丁（比如 display: -webkit-box + -webkit-box-orient: vertical）打包进 mixin，同时明确标注限制。
@mixin truncate-lines($lines: 2) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $lines; overflow: hidden; }- 必须搭配
height或max-height使用，否则高度自适应，截断无效 - Firefox 下完全回退为不截断——无法用 CSS 模拟，如果业务要求强兼容，得另配 JS 方案
- 不要和
text-align: justify同时用，WebKit 下可能错位
为什么不用 JS 插件而选 Sass mixin？
JS 截断（如 clamp.js）能真正跨浏览器生效，但引入运行时开销、SSR 不友好、响应式重算麻烦。Sass mixin 是编译时静态注入，零运行成本，适合内容静态、设备以移动端为主的场景。
- 适合 CMS 输出的标题、摘要等结构化短文本，而非用户实时输入的富文本
- 如果页面要支持 IE11，
-webkit-line-clamp方案直接不可用，此时 mixin 应该报 warning 或提供降级占位样式（比如用…手动截断） - 别在
font-size动态变化的组件里用line-clamp，行高变化会导致截断行数不准
真正难的从来不是写对那几行 CSS，而是想清楚：这里到底要不要截、截几行、截不住时用户看到什么——这些决策没法封装进 mixin，得人来定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
