-webkit-line-clamp需与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden三者共存才生效；.ellipsis-multi混入必须包含这四条声明，缺一不可，且line-height须用无单位值、禁用inline-block元素。
Less里直接写-webkit-line-clamp为什么没效果
因为-webkit-line-clamp不是独立可用的属性，它必须和display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden三者同时存在才被浏览器识别。Less编译器只做变量替换和嵌套展开，不会自动补全依赖样式——你写了-webkit-line-clamp: 2，但没写另外三条，浏览器就当普通声明忽略掉。
.ellipsis-multi(@lines)混入必须包含哪几条声明
缺一不可，漏掉任意一条都会导致截断失败或显示错乱：
-
display: -webkit-box—— 必须用这个值，flex或block都不行 -
-webkit-box-orient: vertical—— 必须显式设为vertical，不写或写错值（比如horizontal）会让行数计算完全失准 -
-webkit-line-clamp: @lines——@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或fit-content），否则行高 × 行数算不出裁剪边界 -
line-height必须用无单位数值（如1.4），禁用px、em、rem——否则-webkit-line-clamp会把行高当像素值硬算，省略号常卡在文字中间 - 文本内不能含
display: inline-block元素（比如图标、<sup></sup>），它们会打断-webkit-box流式布局；统一改为display: inline，或包裹一层<span></span>并设display: inline
Less混入封装示例与使用注意
直接复用的混入写法（兼容 Less 3.0+）：
.ellipsis-multi(@lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
text-overflow: ellipsis;
}
调用时需确保父容器已设max-height和line-height：
.desc {
max-height: 44px; // 2行 × 22px line-height
line-height: 1.4; // 无单位！
.ellipsis-multi(2);
}
如果项目用了 Autoprefixer，记得在-webkit-box-orient前后加注释控制开关，否则可能被误删：/* autoprefixer: off */ 和 /* autoprefixer: on */。
真正容易被忽略的是line-height单位和inline-block元素——这两点在开发中几乎每次出问题都源于此，而不是混入本身写错了。
