应封装.text-ellipsis(@lines: 2) mixin，包含display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lines; overflow: hidden; text-overflow: ellipsis;，并确保元素为block/inline-block，不硬算height，兼容性降级用max-height+line-height配合。
Less mixin 里怎么写 -webkit-line-clamp
直接用 -webkit-line-clamp 实现多行截断，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical，三者缺一不可。只写 -webkit-line-clamp 不会生效，这是最常踩的坑。
Less mixin 要能接受行数参数，同时兼容性兜底（比如加 overflow: hidden 和固定 height），否则在不支持该属性的老浏览器里会完全不截断。
示例 mixin：
.text-ellipsis(@lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
text-overflow: ellipsis;
}
调用时：.text-ellipsis(3); 就是三行截断。
为什么不能只靠 Less 变量控制高度
很多人试图用 @lines * 1.5em 算出 height 并设死，但实际行高受 line-height、font-size、padding 甚至字体渲染差异影响，硬算出来的高度要么截不全，要么留白太多。
更稳妥的做法是：只用 -webkit-line-clamp 做截断，不设 height；如果真要兼容 IE 或旧安卓，就单独加一层 JS 检测或用 max-height + overflow 做近似降级，而不是在 mixin 里混入高度计算逻辑。
容易忽略的一点：-webkit-line-clamp 对 inline 元素无效，必须确保元素是 block 或 inline-block，所以 mixin 外部最好显式声明 display: block。
IE 和 Firefox 兼容性怎么处理
Firefox 直到 119 才支持 -webkit-line-clamp（且需开启实验性 flag），IE 完全不支持。Less mixin 本身无法生成 polyfill，所以得靠运行时判断或降级方案。
推荐做法是：保留 mixin 提供标准写法，再额外加一层 class 降级，比如：
.text-ellipsis-fallback {
max-height: 3.6em; // 2 行 × line-height: 1.8
line-height: 1.8;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
这样在支持的浏览器走原生逻辑，在不支持的浏览器靠 max-height 强制截断（虽然末尾不一定显示省略号）。
注意：max-height 的值必须和当前 line-height 严格匹配，否则可能多出半行或少截一行。
mixins 嵌套或与其他 truncation 写法混用的风险
如果项目里已有基于 text-overflow: ellipsis 的单行截断 mixin，别把它和多行 mixin 混在一个 class 里调用——text-overflow: ellipsis 单行模式下会干扰 -webkit-box 布局，导致多行失效。
使用时注意以下几点：
- 不要在同一个选择器里同时调用单行和多行 mixin
- 避免给已应用多行截断的元素再加
white-space: nowrap - 如果父容器有
transform或will-change，某些旧版 Safari 会破坏-webkit-box渲染，需要测试 - Vue/React 组件中动态切换行数时，
-webkit-line-clamp不会重绘，得靠强制 reflow（比如 toggle class）触发
真正麻烦的不是写 mixin，而是它依赖的渲染机制太脆弱——一个 flex 父容器、一个 position: absolute 子元素、甚至一段注释格式错误的 Less，都可能让整套逻辑静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
