Less如何实现CSS多行文本截断_利用Mixin封装溢出处理-css教程-PHP中文网

多行文本截断不能只用text-overflow: ellipsis，因其仅支持单行；需配合-webkit-box与-webkit-line-clamp，但后者非标准且Firefox不支持，封装Mixin本质是带前缀的CSS语法糖，须注意line-height单位、父容器高度及内联元素归一化。

less如何实现css多行文本截断_利用mixin封装溢出处理

多行文本截断为什么不能只用 `text-overflow: ellipsis`

因为原生 text-overflow: ellipsis 只对单行生效，遇到多行就失效——浏览器根本不会计算“第几行该截”，更不会自动加省略号。你写上 display: -webkit-box 那套也得配合 -webkit-line-clamp，而它不是标准属性，Firefox 完全不认，Safari 旧版本还有渲染抖动问题。

Less 里靠 Mixin 封装，本质是把这套带兼容性补丁的 CSS 组合打包，但得清楚：它只是语法糖，不是魔法。真正起作用的还是那几行带前缀的声明。

封装一个可靠可用的 `multi-ellipsis` Mixin

别用网上抄来的“万能 Mixin”，很多漏了 overflow: hidden 或写错 line-height 基准，导致截断位置偏移。下面这个版本在 Chrome 110+、Safari 16.4+、Edge 112+ 实测对齐，Firefox 回退为无省略号的自然截断（安全降级）：

.multi-ellipsis(@lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键点：

@lines 必须是整数，传 1.5 或变量未定义会导致编译失败或样式丢失
调用时必须确保父容器有明确 height 或 max-height，否则 -webkit-line-clamp 计算失准
如果文本含 inline-block 元素（比如图标），会破坏 -webkit-box 布局，得提前用 display: inline 归一化

和纯 CSS 方案比，Less Mixin 的实际代价

优势是复用方便：.desc { .multi-ellipsis(3); } 一行搞定；劣势是体积和可维护性——每个调用都会生成完整前缀块，30 处调用就重复输出 30 遍 -webkit-box-orient。如果项目已用 PostCSS，其实更推荐用 postcss-line-clamp 插件，在构建时统一处理，Less 里只留语义类名。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

另一个坑：line-height 必须是数值单位（如 1.4），不能是 px 或 em，否则 -webkit-line-clamp 算出的行高会错位，省略号出现在文字中间。

Firefox 下怎么让体验不突兀

它不支持 -webkit-line-clamp，也没等效替代方案。强行用 JS 截字 + 插入 … 会触发重排、滚动卡顿，还破坏可访问性（aria-label 同步难）。稳妥做法是接受它“不显示省略号”，但通过 max-height + overflow: hidden 控制高度，视觉上仍是“截断”效果：

.multi-ellipsis(@lines: 2) {
  // WebKit 核心逻辑
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  overflow: hidden;
  text-overflow: ellipsis;
<p>// Firefox / 其他内核兜底：仅控高，不加省略号
max-height: (@lines * 1.4em);
}</p>

这里 1.4em 要和实际 line-height 严格一致，差 0.05 都可能导致最后一行被切掉半截。

最麻烦的是响应式场景：字体缩放、rem 动态变化时，max-height 得跟着算，这时候 Mixin 参数就得接函数式计算，而不是简单乘法——容易被忽略的复杂点就在这儿。