单行截断必须同时满足overflow:hidden、text-overflow:ellipsis、white-space:nowrap及明确宽度；多行截断需display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp、overflow:hidden四声明共存，且容器须有宽度约束、非flex/grid显示、合理行高。
单行截断必须三要素齐备，多行截断必须四条声明共存，否则编译后无效或浏览器里不生效——这不是写法问题，是 CSS 渲染机制硬性要求。
单行省略为什么加了 text-overflow: ellipsis 还没效果
八成是漏了 white-space: nowrap，或者容器没设 width/max-width。浏览器默认允许换行，文本一折行，就不存在“向右溢出”，text-overflow: ellipsis 根本不触发。
- 必须同时满足：
overflow: hidden+text-overflow: ellipsis+white-space: nowrap - 元素得有明确宽度约束：
width、max-width，或在 flex 容器中设flex: 1等可收缩行为 - inline 元素（如
<span>）需先设display: inline-block或block，否则宽度无效 - 别在
display: flex的子项上直接用——flex item 默认min-width: auto，会撑开容器，截断失效
多行省略的 -webkit-line-clamp 编译后消失了
Autoprefixer 默认删除所有非标准私有属性，-webkit-line-clamp 正在黑名单里。SCSS 里写得再全，不干预，生成的 CSS 里这行就没了。
- 必须在 mixin 定义前加
/* autoprefixer: off */，整块样式原样保留（最稳妥） - 只忽略下一行用
/* autoprefixer: ignore next */，但display: -webkit-box和-webkit-box-orient: vertical同样需要保留，所以前者更常用 - 缺了这步，
@include line-clamp(2)编译出来就是个空壳，开发者工具里只能看到max-height降级逻辑
@mixin ellipsis 必须封装的四条 WebKit 声明
多行截断不是加个 -webkit-line-clamp 就完事，它依赖一套协作机制，少一条都可能错位、不截断、甚至布局崩坏。
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box：启用旧版弹性盒，-webkit-line-clamp只在此模型下有效 -
-webkit-box-orient: vertical：必须为vertical，否则-webkit-line-clamp被完全忽略 -
-webkit-line-clamp: $lines：行数由参数控制，不能写死；值必须是整数（如2，不能是2px） -
overflow: hidden：配合触发截断；text-overflow: ellipsis在多行场景下非必需但建议保留，某些 Safari 版本依赖它稳定显示末尾省略号
调用时容器必须满足的三个隐藏条件
就算 mixin 写对了，容器不配合照样白搭。这些限制不会报错，但结果就是“看起来写了，却没反应”。
- 必须有明确宽度约束：
width、max-width，或在 flex/grid 中受收缩限制（比如flex: 1）；纯display: inline不行 - 不能已有
display: flex或display: grid：与display: -webkit-box冲突，布局可能错乱；Ant Design 的.el-table__cell就常因此失效，需额外包裹一层<div>并重置display - 推荐显式设置
line-height和font-size：否则不同字体下截断位置浮动，省略号可能被裁掉半截；降级用max-height时，单位必须统一（如都用em），且max-height: $lines * $lh要严格对齐
真正难的不是写出 mixin，而是每次调用时都记得检查容器是否“守规矩”——宽度、display 类型、line-height，三者缺一不可。尤其在组件库嵌套场景下，父级样式常常悄悄覆盖掉这些前提条件。
