单行省略需同时设置overflow: hidden、text-overflow: ellipsis、white-space: nowrap及块级显示；多行省略依赖-webkit-line-clamp且仅限WebKit/Blink，需display: -webkit-box、-webkit-box-orient: vertical，并注意响应式与动态内容下的渲染失效问题。
Less中单行文本溢出省略号的正确写法
直接套用CSS原生写法在Less里会失效，因为white-space: nowrap和overflow: hidden必须与text-overflow: ellipsis同时存在才生效，且容器需有明确宽度（或max-width）。Less本身不改变CSS渲染逻辑，但容易漏掉关键约束条件。
- 容器必须是块级元素（
display: block或inline-block），inline元素无效 - 不能依赖父容器的
width: 100%自动计算——如果父容器没设宽，子元素width: 100%会撑开，省略失效 -
text-overflow: ellipsis对flex子项默认不生效，需额外加min-width: 0或overflow: hidden
.ellipsis-one-line() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}Less中多行文本溢出省略号的兼容性取舍
CSS原生不支持多行text-overflow: ellipsis，主流方案只有-webkit-line-clamp（仅WebKit/Blink内核），且它依赖display: -webkit-box这一整套组合拳。Firefox、Safari 16.4+ 之后才部分支持，IE完全不支持。
- 必须用
display: -webkit-box，不能用flex或block替代 -
-webkit-box-orient: vertical是硬性要求，漏写就无效果 -
line-clamp值为整数，不能是变量计算结果（Less编译时无法动态生成该属性） - 高度不可靠：不同字体、字号、行高下，
height很难精准匹配line-clamp × line-height，建议用max-height+overflow: hidden兜底
.ellipsis-two-lines() {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}封装成可复用Mixin时的关键参数设计
真正实用的Mixin要能控制行数、是否强制块级、是否保留原始display值。硬编码line-clamp: 2不如接受参数，但要注意：Less不能把变量注入-webkit-line-clamp的属性名里，只能注入值。
- 第一个参数
@lines必须是数字字面量（如2），不能是@n变量运算结果（否则编译后变成-webkit-line-clamp: @n，浏览器忽略） - 可选第二个参数
@display用于覆盖display值，默认-webkit-box，但若用户想保留inline-block，就得拆成两套Mixin - 单行版无需
@lines参数，但应和多行版命名区分开，避免误用
.ellipsis-multi(@lines) when (isnumber(@lines)) and (@lines > 1) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
}
.ellipsis-multi(1) {
.ellipsis-one-line();
}实际项目中容易被忽略的渲染陷阱
省略号在真实业务里常和font-size响应式、zoom、transform: scale()共存，这时-webkit-line-clamp极易失效——不是Less的问题，而是渲染层对盒模型的重算异常。
立即学习“前端免费学习笔记（深入）”；
- 使用
rem或em做字号响应时，务必确保line-height也同步缩放，否则max-height兜底会错位 -
transform: scale(0.9)会让-webkit-box布局失准，文字可能被截半或完全不省略 - Vue/React组件中动态切换文本内容时，
line-clamp不会自动重绘，需强制reflow（例如改key或触发布局属性）
最稳妥的做法：单行用纯CSS方案，多行只在移动端WebView或确定内核的环境用-webkit-line-clamp，PC端降级为max-height + overflow: hidden配JS截断逻辑。Less封装再漂亮，也绕不开浏览器本身的限制。
