text-overflow: ellipsis仅对单行生效，因需white-space: nowrap+overflow: hidden+明确宽度；多行须用-webkit-box+vertical+line-clamp+hidden，且父容器需有max-height、line-height用无单位值、禁用inline-block元素。
为什么 text-overflow: ellipsis 不能直接用于多行
它只在单行生效，前提是 white-space: nowrap + overflow: hidden。多行场景下，浏览器压根不解析“第几行该截”，text-overflow 就是摆设。强行套用只会让文字溢出容器，或者整段消失——因为没配 display: -webkit-box 等前置条件。
.multi-ellipsis() Mixin 必须包含的四条声明
缺一不可，漏掉任意一条都会导致截断失效或位置错乱：
-
display: -webkit-box—— 启用弹性盒模型，这是-webkit-line-clamp的前提 -
-webkit-box-orient: vertical—— 必须设为vertical，否则行数计算完全失准 -
-webkit-line-clamp: @lines—— 行数必须是整数（如2、3），传1.5或未定义变量会编译失败 -
overflow: hidden—— 不是可选，是强制；没有它，-webkit-line-clamp直接被忽略
text-overflow: ellipsis 可加可不加：加了在 WebKit 内核里显示省略号；不加则 Firefox 和部分旧 Safari 会自然截断（无省略号），但视觉上仍是可控高度。
容易被忽略的三个硬性约束
这些不是“建议”，是 -webkit-line-clamp 实际运行时的物理限制：
- 父容器必须有明确的
max-height或height（不能是auto或min-content），否则行高乘以行数算不出实际裁剪边界 -
line-height必须用无单位数值（如1.4），禁用px、em、rem—— 否则-webkit-line-clamp会把行高当像素值硬算，省略号常卡在文字中间 - 文本内不能含
display: inline-block元素（比如图标、标签），它们会打断-webkit-box的流式布局；统一改为display: inline或包裹一层span并设display: inline
Less Mixin 和 PostCSS 插件怎么选
如果你项目已接入 postcss-line-clamp，就别写 Mixin 了。原因很实在：
- Mixin 每调用一次，就原样输出一遍带前缀的四行 CSS；30 处使用 = 120 行重复代码，gzip 后仍占体积
- PostCSS 插件在构建时统一处理，Less 里只需写语义类名（如
.desc--clamp-3），维护和修改成本低得多 - Firefox 兼容性问题插件也能自动 fallback（比如加
max-height+overflow: hidden），Mixin 做不到这点
真正难处理的从来不是写法本身，而是 line-height 单位混用、父容器高度未约束、内联元素干扰这三件事——它们不会报错，但会让省略号出现在错误位置，且极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
