多行省略不能只用 white-space: nowrap，因其仅禁止单行换行，会导致文本挤成一长条；真正生效的是 -webkit-line-clamp，但必须与 display: -webkit-box 和 -webkit-box-orient: vertical 配合使用，三者缺一不可。
多行省略为什么不能只用 white-space: nowrap
因为white-space: nowrap只对单行生效，强行套在多行上会破坏换行逻辑，文字直接挤成一长条。真正起作用的是-webkit-line-clamp，但它必须配合display: -webkit-box和-webkit-box-orient: vertical才能触发截断行为——这三者缺一不可，漏一个就完全不生效。
@mixin text-ellipsis 必须带参数且默认值要小心
定义时参数顺序直接影响调用安全：
-
@mixin text-ellipsis($lines: 2)合法：默认值在末尾，调用@include text-ellipsis()会用 2 行 -
@mixin text-ellipsis($lines, $color: #333)报错：带默认值的参数不能在非默认参数前面 - 别写
@if $lines == null判断是否传参——未传时$lines就是2，不是null；真要 fallback，得用独立变量+if()函数
实际调用时容易忽略的渲染兼容性
这个混合宏在 Safari 15.4+ 和 Chrome 63+ 完全可用，但老版 iOS Safari（如 iOS 12）对-webkit-line-clamp支持不稳定，可能只截第一行或直接不截。如果项目需兼容旧 iOS，得加降级：
- 先写
overflow: hidden; text-overflow: ellipsis;保底单行截断 - 再用
@supports (-webkit-line-clamp: 2)包裹多行逻辑，避免污染不支持的环境 - 别在
flex容器子项上直接用——某些 flex 布局会干扰-webkit-box计算，建议外层加width: 100%或min-width: 0
为什么@content在这里没用、也不该用
@content适合透传样式块（比如响应式里插入定制规则），但多行省略是固定结构：必须有display: -webkit-box、必须设-webkit-line-clamp、必须限制overflow。它不接受“额外样式注入”，强行加@content只会让调用方误以为能覆盖核心逻辑，结果导致line-clamp失效或布局错乱。真正需要扩展的点只有行数——所以参数就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
