-webkit-line-clamp必须与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden四者共存才生效，缺一不可；仅设该属性无效，且行数须为字面量整数，元素需为block/inline-block，line-height须用无单位值。
必须同时声明四条 WebKit 属性才能生效
只写 -webkit-line-clamp 不会触发多行截断，这是最常被忽略的前提。它必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 组合使用，缺一不可。漏掉任意一条，编译出来的 CSS 就是无效的——浏览器既不报错，也不渲染省略号，只会当作普通换行处理。
实操建议：
- 把这四条写进 mixin 时用注释标清楚作用，避免后续误删
- 别依赖“看起来像就行”，逐字核对属性名和值：-webkit-box-orient 只能是
vertical，不能拼错或写成up/top - 如果调用后没效果，优先检查这四行是否完整出现在最终 CSS 中，而不是去调 height 或 line-height
行数参数必须是编译期确定的整数
-webkit-line-clamp 不接受变量运算、函数返回值或未定义变量。像 @lines: @base-lines + 1 或 @lines: unit(2.5, '') 这类写法会导致编译失败或静默失效。它只认字面量整数，比如 2、3、5。
实操建议：
- 定义 mixin 时给
@lines设默认值：.text-ellipsis(@lines: 2) - 调用时直接传数字：
.text-ellipsis(3)，不要包裹引号、不要加单位、不要算式 - 如果需要动态控制行数（如响应式场景），得靠媒体查询 + 多个重载 mixin，而不是一个 mixin 里做判断
元素必须是 block 或 inline-block 才能生效
-webkit-line-clamp 对 inline 元素完全无效。即使你在 mixin 里写了所有属性，如果调用它的 HTML 元素是原生 <span></span>、<a></a> 或其他 inline 元素，默认 display 值就是 inline，整个机制就失效了。
实操建议：
- mixin 内部不设
display，因为 display 类型应由语义决定；但调用处必须显式声明：display: block或display: inline-block - 在 flex 容器中使用时，子项若没设
min-width: 0，width 计算可能异常，导致截断位置偏移；建议统一加min-width: 0 - 文本内含
inline-block子元素（如图标、<sup></sup>）会打断 box 流，可改用display: inline或在外层包一层 block 容器
单行和多行截断不能共用同一个 mixin
单行截断依赖 white-space: nowrap + overflow: hidden + text-overflow: ellipsis，而多行截断依赖 -webkit-box 布局。两者底层机制冲突，强行合并会导致部分浏览器渲染异常或完全不生效。
实操建议：
- 拆成两个独立 mixin：
.ellipsis-one-line()和.text-ellipsis(@lines: 2)，职责清晰，调试方便 -
.ellipsis-one-line()必须配合宽度约束（width或max-width），否则不生效；flex 子项记得加min-width: 0 - Firefox 等非 WebKit 浏览器对多行截断无原生支持，降级方案（如
max-height+line-height）应在组件层单独处理，不要塞进 mixin 里混用
1.4），一旦写成 20px 或 1.4em，-webkit-line-clamp 的行数计算就会失准，省略号可能卡在半行中间，且这种问题不会报错、无法通过审查元素直观识别。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
