单行省略必须同时满足white-space: nowrap、overflow: hidden、text-overflow: ellipsis且容器有明确宽度；多行省略在less中依赖-webkit-line-clamp组合四属性（display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden），缺一不可，且受限于webkit/blink内核，firefox等仅能降级为max-height+hidden。
单行省略必须同时满足 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 且容器有明确宽度；多行省略在 Less 中无法真正“跨浏览器兼容”，-webkit-line-clamp 是唯一实用方案，但只在 WebKit/Blink 内核生效，Firefox 和旧 Safari 会静默降级——这不是写法问题，是 CSS 标准现状。
单行省略 mixin 必须带 width/max-width 约束
Less 编译不校验运行时布局，所以很容易漏掉宽度声明。光写 .ellipsis-one-line() 混合器，却不给调用处加 width 或 max-width，结果就是样式完全不生效。
-
width: 100%只在父容器有明确宽时才可靠；若父容器是display: flex且没设min-width: 0，子元素的width: 100%会撑开，省略失效 - 对
flex子项，必须额外加min-width: 0或overflow: hidden才能激活截断逻辑 - 内联元素（如原生
<span></span>）默认不支持text-overflow，得先设display: inline-block或block
多行省略 mixin 的四条声明缺一不可
网上很多抄来的 .multi-ellipsis() 少写了 overflow: hidden 或漏了 -webkit-box-orient: vertical，导致渲染错位或直接无效果。实际生效靠的是这四行组合：
-
display: -webkit-box—— 不是flex，不是block，必须是这个值 -
-webkit-box-orient: vertical—— 漏写或写成horizontal，-webkit-line-clamp就算设了也无效 -
-webkit-line-clamp: @lines——@lines必须是编译期确定的整数（如2、3），不能是表达式或未定义变量 -
overflow: hidden—— 不是可选，是硬性依赖；没有它，整个机制就退化为普通换行
line-height 单位和内联元素是隐形杀手
这两点不报错、不警告，但会让省略号卡在文字中间或少显示一行，极难排查。
-
line-height必须用无单位值（如1.4），禁用px、em、rem；否则-webkit-line-clamp会把行高当像素硬算，裁剪位置偏移 - 文本里含
display: inline-block元素（比如图标、<sup></sup>、自定义组件）会打断-webkit-box流式布局；统一改为display: inline或外层包<span></span>并设display: inline - 父容器高度不能是
auto或min-content，必须设max-height（推荐）或height，否则行数计算失准
别迷信 mixin，优先考虑 postcss-line-clamp
Less Mixin 每调用一次，就重复输出一遍带前缀的四行 CSS；30 处使用 = 120 行冗余代码。而 postcss-line-clamp 插件能在构建时统一处理，Less 里只需写语义类名（如 .desc--clamp-3），还能自动 fallback 到 max-height + overflow: hidden 安全降级。
真正难处理的从来不是怎么写 mixin，而是 line-height 单位混用、父容器高度未约束、内联元素干扰这三件事——它们不会报错，但会让省略号出现在错误位置，且极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
