text-overflow: ellipsis需配合overflow: hidden和white-space: nowrap才生效；单行截断用.single-line-ellipsis()，多行截断推荐-webkit-box方案并封装.multi-line-ellipsis(@lines)；字体动态缩放时line-clamp易失效，建议js动态适配。
Less里单行文本溢出用text-overflow: ellipsis必须配white-space: nowrap
直接写text-overflow: ellipsis没用，它只对块级、固定宽、不换行的元素生效。常见错误是漏掉overflow: hidden或white-space: nowrap，导致省略号根本不显示。
封装成Mixin时得把这三者绑死：
.single-line-ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
调用时只需.single-line-ellipsis()，但注意父容器必须有明确宽度（比如width: 200px或max-width: 100%），否则overflow: hidden不触发截断逻辑。
多行截断用display: -webkit-box是目前最稳方案
CSS原生line-clamp虽已进标准，但IE全系不支持，且Firefox直到119才支持display: -webkit-box下的-webkit-line-clamp。所以生产环境仍得靠Webkit私有属性兜底。
关键点有三个：
-
display: -webkit-box必须开启弹性盒模型（仅Webkit内核有效） -
-webkit-box-orient: vertical指定排列方向为垂直 -
-webkit-line-clamp: 3控制行数，值必须是整数
对应Mixin写法：
.multi-line-ellipsis(@lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
}
调用.multi-line-ellipsis(3)就能截3行。注意：这个方案在非Webkit浏览器（如旧版Firefox）下会退化为不截断，需配合JS降级逻辑。
Mixin参数设计要区分max-lines和fallback场景
实际项目中常遇到两种需求：一种是严格按行数截断（如商品标题最多两行），另一种是“尽量不超过N行，但允许撑开”（如详情页摘要）。后者不能硬上-webkit-line-clamp，否则内容会被粗暴砍掉。
建议拆成两个Mixin：
-
.multi-line-clip(@lines)：纯CSS截断，无兼容性兜底 -
.multi-line-fade(@lines, @fade-height: 24px)：用渐变遮罩+固定高度模拟“软截断”，兼容所有浏览器
例如.multi-line-fade内部会设height: (@lines * 1.5em) + @fade-height，再叠加background: linear-gradient(to bottom, transparent, white 80%)，视觉上更柔和。
容易被忽略的细节：字体大小变化时line-clamp会失效
-webkit-line-clamp计算行高依赖当前font-size和line-height。如果元素用了rem或em单位，且根字体动态缩放（比如用户调整浏览器字号），截断行数可能错乱——本该截2行，结果只显示1行半。
解决办法只有两个：
- 强制用
px单位定义font-size和line-height（牺牲可访问性） - 改用JS监听
resize或font-size变化，动态重算height并更新style（推荐但成本高）
Less本身无法感知运行时字体变化，所以这类场景Mixin只能做静态约束，别指望它自动适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
