-webkit-line-clamp在Less中直接写不生效，因其必须与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden、text-overflow: ellipsis及明确的height/max-height配合使用，缺一则失效；Less仅单写该属性时无法自动注入依赖样式，导致浏览器忽略。
为什么
在Less里直接写不生效
因为
必须配合
和
才能触发多行截断，三者缺一不可；而Less编译时若只写单条属性，其他依赖属性没同步注入，浏览器就当普通文本渲染——看起来“写了但没用”。
常见错误写法：
正确做法是把整套Webkit盒模型逻辑打包进混合器：
必须设为
（不能用
或
）
必须显式声明
和
要配套设为
和
父容器需有明确
或
，否则
不计算行数
Less混合器封装：支持变量传入行数+自动补全必要样式
直接复用的混合器写法（兼容Less 3.0+）：
立即学习
“
前端免费学习笔记（深入）
”；
调用示例：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
注意点：
不要在混合器里加
或
——它们会干扰
的换行逻辑
若文本含中文/Emoji，建议额外加
等值，让
与行高匹配更稳
IE完全不支持，如需降级，得靠JS方案（比如
），CSS层无法兜底
Firefox / Safari / Chrome兼容性差异怎么处理
本质是WebKit私有属性，Chrome/Safari/Edge（Chromium内核）都支持，但Firefox至今未实现。这不是Less能解决的问题，而是CSS能力边界。
所以实际项目中：
如果目标用户基本不用Firefox，可放心用
+
如果必须兼容Firefox，得放弃纯CSS方案，改用JS检测+截断逻辑，或者用
polyfill（如
）
别试图用
做条件编译——Less不解析运行时支持，这句会被原样输出，对CSS无意义
为什么加了
还是显示不全
最常踩的坑不是Less语法，而是布局上下文问题：
父元素用了
且没设
，子元素被压缩导致
失效
文本节点外层包裹了
或
等inline元素，而
只作用于块级容器
Less变量传入非数字（比如
），Less会报错或编译出错值
构建工具（如webpack + less-loader）开启了CSS压缩，可能误删
前缀（需检查
是否为
）
调试建议：打开DevTools，看最终生成的CSS是否完整包含那5条属性，并确认元素computed样式里
确实是
。
-webkit-line-clamp-webkit-line-clampdisplay: -webkit-box-webkit-box-orient: vertical.ellipsis-multi(@lines: 2) {
-webkit-line-clamp: @lines;
}display-webkit-boxflexblock-webkit-box-orientverticaloverflowtext-overflowhiddenellipsisheightmax-height-webkit-line-clamp.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-breakwhite-space-webkit-boxline-height: 1.5max-heightclamp.js-webkit-line-clamp.ellipsis-multi()max-heightline-clampcss-line-clamp@supports (-webkit-line-clamp: 2).ellipsis-multi(2)display: flexflex-shrink: 0max-height-webkit-box.ellipsis-multi("2")-webkit-lessOptions.javascriptEnabledtruedisplay-webkit-box