单行省略不生效是因为text-overflow: ellipsis必须同时满足四个条件：块级元素（display: block/inline-block）、明确宽度（width/max-width）、white-space: nowrap、overflow: hidden；缺一即失效。
单行省略为什么总不生效
直接写 text-overflow: ellipsis 没用，它只在满足四个条件时才触发：容器必须是块级（display: block 或 inline-block）、有明确宽度（width 或 max-width）、white-space: nowrap、overflow: hidden。漏掉任意一条，省略号就静默失效。
常见错误包括：
• 父容器是 display: flex 但子元素没加 min-width: 0，导致 width: 100% 失效
• 对原生 <span></span> 直接调用 mixin，没设 display: inline-block
• 在响应式布局里只写 width: 100%，但父容器宽度未定义（比如 flex item 未约束）
推荐 mixin 写法：
.single-line-ellipsis() {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}调用后必须补上宽度声明，例如：max-width: 200px 或 width: 100%（且确保父容器宽度可计算）。多行省略必须用 -webkit-line-clamp 组合拳
原生 CSS 不支持多行 text-overflow: ellipsis，-webkit-line-clamp 是目前唯一实用方案，但它不是独立属性——必须和另外三行一起出现，缺一不可：
-
display: -webkit-box（不能替换成flex或block） -
-webkit-box-orient: vertical（写错方向或漏掉，整个机制失效） -
-webkit-line-clamp: @lines（@lines必须是编译期确定的整数，比如2，不能是@lines + 1或未定义变量） -
overflow: hidden（不是可选，没它就退化为普通换行）
封装时建议这样写：
.multi-line-ellipsis(@lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
overflow: hidden;
}注意：text-overflow: ellipsis 可加可不加，Chrome/Safari 会识别，Firefox 完全忽略。line-height 和内联元素是隐形杀手
这两点不报错，但会让截断位置偏移、少显示一行，排查极难：
-
line-height必须用无单位值（如1.4），禁用px、em、rem；否则-webkit-line-clamp会把行高当像素硬算，裁剪错位 - 文本中含
display: inline-block元素（比如图标、<sup></sup>、自定义组件）会打断-webkit-box的流式布局；统一改为display: inline，或外层包一层并设display: inline - 父容器高度不能是
auto或min-content，必须设max-height（推荐）或固定height；否则行数计算失准
Less Mixin 的真实代价与替代思路
Mixin 封装只是语法糖，不是魔法。每次调用都会生成完整四行带前缀的 CSS，30 处调用 = 30 遍重复代码。更麻烦的是：
• Autoprefixer 默认会删掉 -webkit- 前缀，需手动加 /* autoprefixer: off */ 注释包裹整个块
• Firefox、旧 Safari 静默降级（不显示省略号，也不报错），只能靠 JS 补充检测逻辑
如果项目已用 PostCSS，更推荐用 postcss-line-clamp 插件，在构建时统一处理，Less 里只留语义类名，比如：.desc { max-lines: 3; }。Mixin 看似方便，但真正要稳，得直面兼容性边界和渲染细节——比如 max-height 值怎么算、line-height 单位怎么选、内联元素怎么归一化，这些才是落地时卡住人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
