如何在Less中通过Mixin实现文字单行与多行截断CSS-css教程-PHP中文网

单行截断mixin只需传width参数（默认100%），因white-space、overflow、text-overflow三属性固定且不可变；多行则需@lines和@line-height参数以计算max-height及遮罩位置。

如何在less中通过mixin实现文字单行与多行截断css

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%);
}
}</p>