单行截断Mixin需绑定white-space: nowrap、overflow: hidden、text-overflow: ellipsis并强制width/max-width；多行截断Mixin依赖-webkit-box四属性，@lines须为编译期整数，且必须设height/max-height，两者机制冲突不可合并。
Less中定义单行文本截断Mixin
单行截断本质是三步：强制不换行、隐藏溢出、添加省略号。在Less里封装成Mixin最关键是把white-space、overflow、text-overflow三个属性打包，且必须配合width或max-width才生效（这点常被忽略）。
实操建议：
- Mixin参数只暴露
width（必填），其他属性固定写死，避免误用导致失效 - 不要在Mixin里设
display: block——行内元素也能截断，加了反而破坏布局上下文 - 示例：
.truncate-one-line(@width) { width: @width; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Less中定义多行文本截断Mixin（WebKit-only）
多行截断没有CSS标准方案，目前仅-webkit-line-clamp可靠支持。它依赖display: -webkit-box和-webkit-box-orient: vertical，且line-clamp值必须为整数，不能是变量计算结果（Less编译期无法动态生成该值）。
实操建议：
- Mixin参数设计为
@lines（必填整数）和@height（可选，用于预估容器高度） - 必须显式设置
height或max-height，否则-webkit-line-clamp可能不触发 - 示例：
.truncate-multi-line(@lines, @height: auto) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lines; overflow: hidden; height: @height; }
为什么不能用一个Mixin兼容单行和多行？
因为两者底层机制冲突：white-space: nowrap会禁用换行，而-webkit-box依赖换行计算行数。若在同一个选择器里同时写入，浏览器会按CSS优先级规则丢弃部分声明（通常是-webkit-line-clamp失效）。
常见错误现象：
- 调用混合Mixin后，多行内容直接撑开容器，末尾无省略号
- 开发者试图用
if条件判断@lines是否为1来切换逻辑——Less不支持运行时条件分支，编译后仍是静态CSS - 忘记给多行Mixin容器设
height，导致截断不生效（尤其Flex子项中更隐蔽）
实际项目中的调用与兼容性提醒
生产环境必须分开调用，且多行截断需加@supports包裹以规避非WebKit内核问题。Less本身不处理CSS特性检测，这部分得靠后续PostCSS或手动补全。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 单行Mixin可安全用于所有现代浏览器（IE11+）
- 多行Mixin必须搭配
@supports (-webkit-line-clamp: 1)，否则Firefox/Safari旧版会显示异常 - 移动端iOS Safari对
-webkit-line-clamp支持稳定，但Android WebView版本碎片化严重，上线前务必真机验证
height值不是装饰——它是触发截断的开关，也是最容易漏掉的硬性条件。 
