-webkit-line-clamp在Less中直接写不生效，因其必须与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden、text-overflow: ellipsis及明确的height/max-height配合使用，缺一则失效；Less仅单写该属性时无法自动注入依赖样式，导致浏览器忽略。
为什么-webkit-line-clamp在Less里直接写不生效
因为-webkit-line-clamp必须配合display: -webkit-box和-webkit-box-orient: vertical才能触发多行截断，三者缺一不可；而Less编译时若只写单条属性，其他依赖属性没同步注入，浏览器就当普通文本渲染——看起来“写了但没用”。
常见错误写法：
.ellipsis-multi(@lines: 2) {<br> -webkit-line-clamp: @lines;<br>}
正确做法是把整套Webkit盒模型逻辑打包进混合器：
-
display必须设为-webkit-box（不能用flex或block） -
-webkit-box-orient必须显式声明vertical -
overflow和text-overflow要配套设为hidden和ellipsis - 父容器需有明确
height或max-height，否则-webkit-line-clamp不计算行数
Less混合器封装：支持变量传入行数+自动补全必要样式
直接复用的混合器写法（兼容Less 3.0+）：
.ellipsis-multi(@lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
text-overflow: ellipsis;
}
调用示例：
.desc {
max-height: 40px; // 必须限制高度，否则line-clamp无效
.ellipsis-multi(3);
}
注意点：
- 不要在混合器里加
word-break或white-space——它们会干扰-webkit-box的换行逻辑 - 若文本含中文/Emoji，建议额外加
line-height: 1.5等值，让max-height与行高匹配更稳 - IE完全不支持，如需降级，得靠JS方案（比如
clamp.js），CSS层无法兜底
Firefox / Safari / Chrome兼容性差异怎么处理
-webkit-line-clamp本质是WebKit私有属性，Chrome/Safari/Edge（Chromium内核）都支持，但Firefox至今未实现。这不是Less能解决的问题，而是CSS能力边界。
所以实际项目中：
- 如果目标用户基本不用Firefox，可放心用
.ellipsis-multi()+max-height - 如果必须兼容Firefox，得放弃纯CSS方案，改用JS检测+截断逻辑，或者用
line-clamppolyfill（如css-line-clamp） - 别试图用
@supports (-webkit-line-clamp: 2)做条件编译——Less不解析运行时支持，这句会被原样输出，对CSS无意义
为什么加了.ellipsis-multi(2)还是显示不全
最常踩的坑不是Less语法，而是布局上下文问题：
- 父元素用了
display: flex且没设flex-shrink: 0，子元素被压缩导致max-height失效 - 文本节点外层包裹了
或等inline元素，而-webkit-box只作用于块级容器 - Less变量传入非数字（比如
.ellipsis-multi("2")），Less会报错或编译出错值 - 构建工具（如webpack + less-loader）开启了CSS压缩，可能误删
-webkit-前缀（需检查lessOptions.javascriptEnabled是否为true）
调试建议：打开DevTools，看最终生成的CSS是否完整包含那5条属性，并确认元素computed样式里display确实是-webkit-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
