结论：.text-ellipsis-multi 混合必须手动写 -webkit- 前缀，配套 display: -webkit-box 和 -webkit-box-orient: vertical，且仅支持固定数字行数（如2/3），Firefox不支持，需JS回退；autoprefixer无效。
Less混合里怎么写-webkit-line-clamp兼容方案
直接说结论：.text-ellipsis-multi 混合必须手动补全 -webkit- 前缀，原生 line-clamp 不是标准属性，所有浏览器都只认带前缀的版本，连 Safari 16+ 都不例外。
常见错误是以为写成 line-clamp: 2 就能生效，结果在 Chrome/Firefox 里完全没反应——因为没加 -webkit-，而且漏了配套的 display: -webkit-box 和 -webkit-box-orient: vertical。
- 必须用
display: -webkit-box（不能用flex或block） -
-webkit-line-clamp必须是数字，不能是变量名或表达式（Less 编译时无法动态生成该值） - Firefox 完全不支持
-webkit-line-clamp，需额外用 JavaScript 回退或接受不截断
怎么让行数参数可配置又不破坏编译
Less 混合的参数可以传行数，但得注意：传进去的变量不能直接塞进 -webkit-line-clamp 属性值里——它不是 CSS 变量，是静态声明。所以要用 when 条件分支或预定义固定值。
推荐做法是限制为几个常用行数，避免无限扩展：
立即学习“前端免费学习笔记（深入）”；
.text-ellipsis-multi(@lines) when (@lines = 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-ellipsis-multi(@lines) when (@lines = 3) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
如果硬要“动态”，只能靠 JS 在运行时设 style.webkitLineClamp，Less 层面做不到真正泛型。
为什么加了前缀还是不生效？检查这三点
90% 的失效不是 Less 写错，而是 HTML/CSS 环境没配对：
- 父容器必须有明确的
height或max-height，否则-webkit-box不会触发截断 - 内容不能是
inline元素（比如裸<span>），得是block或inline-block - 别在
position: absolute或transform元素上用——某些 Safari 版本会直接忽略-webkit-line-clamp
典型错误示例：.desc { position: relative; .text-ellipsis-multi(2); } 看似没问题，但若子元素用了 transform: translateZ(0)，Safari 就罢工。
要不要加 autoprefixer？加了也没用
autoprefixer 对 -webkit-line-clamp 完全无效——它只处理标准草案属性（比如 display: flex），而 line-clamp 是 WebKit 私有扩展，从未进入标准流程。所以 Less 里必须手写 -webkit-，不能依赖后处理。
另外注意：Chrome 从 93 开始支持无前缀的 line-clamp（仅限 display: block 场景），但行为和 -webkit-box 方案不兼容，且 Firefox/Edge 仍无视。所以目前最稳的仍是全套 -webkit- 写法。
真正容易被忽略的是高度控制逻辑——line-clamp 本质是“显示 N 行 + 隐藏溢出”，但行高、字体大小、padding 全都会影响实际裁剪位置，测试时最好用固定字号和行高起步。
