单行截断Mixin只需传width参数（默认100%），因white-space、overflow、text-overflow三属性固定且不可变；多行则需@lines和@line-height参数以计算max-height及遮罩位置。
Less中定义单行截断Mixin要传哪些参数
单行截断的核心是white-space: nowrap + overflow: hidden + text-overflow: ellipsis，三者缺一不可。在Less里封装成Mixin时，建议只暴露width作为可选参数（默认100%），其他属性固定写死——因为只要用了这个Mixin，语义就是“强制单行+省略”，动态控制white-space反而容易误用。
常见错误是把width写成max-width：单行截断必须有明确宽度约束，max-width在父容器足够宽时不起作用，导致不截断。
.single-line-ellipsis(@width: 100%) {
display: block;
width: @width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}多行截断Mixin为什么不能只靠line-clamp
line-clamp确实能一行搞定多行截断，但它依赖display: -webkit-box和-webkit-line-clamp，属于WebKit私有属性，Firefox和IE完全不支持。如果项目需要兼容性，就必须用伪元素+绝对定位的降级方案，而这个方案无法用纯CSS变量控制行数——必须在Less里用参数生成对应高度和mask或linear-gradient遮罩。
所以实际Mixin要分两层：优先用line-clamp，再叠加一层渐变遮罩兜底。行数参数@lines直接影响max-height计算（假设行高1.5em，则max-height: (@lines * 1.5em)）和遮罩位置。
立即学习“前端免费学习笔记（深入）”；
.multi-line-ellipsis(@lines: 2, @line-height: 1.5em) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
<p>// 兜底：渐变遮罩（仅当需要兼容老浏览器时启用）
position: relative;
max-height: (@lines * @line-height);
&::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 3em;
height: @line-height;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
}调用时怎么避免display冲突
这两个Mixin都会覆盖display值：single-line-ellipsis设为block，multi-line-ellipsis设为-webkit-box。如果原元素是inline或flex子项，直接调用会导致布局错乱。
解决方案只有两个：
- 提前把元素设为
display: block或display: inline-block（推荐） - 在Mixin里加
display参数，默认block，但允许覆盖（增加维护成本，不推荐）
更隐蔽的坑是Flex容器里的子元素：即使设了width，若父容器没设flex-shrink: 0，子元素仍可能被压缩导致截断失效。这时候得额外加flex-shrink: 0。
为什么不要在同一个选择器里混用两个Mixin
Less编译后，single-line-ellipsis和multi-line-ellipsis会同时输出display、overflow等属性，后者覆盖前者，但-webkit-line-clamp在单行场景下反而可能引发渲染异常（比如文字突然垂直居中）。
真实业务中，单行和多行通常是互斥需求：标题用单行，描述用多行。硬要在同一类名里切换，不如拆成两个独立class，用JS控制开关——否则光靠CSS无法响应行数变化，还得监听resize和DOMSubtreeModified，得不偿失。
最常被忽略的是字体加载影响：如果用了自定义字体，line-height计算会因字体未就绪而偏差，导致多行截断少显示一行。稳妥做法是等font-display: swap稳定后再触发截断逻辑，或者用chakra-ui这类库的Text组件内置容错。
