单行省略无效八成因漏写white-space: nowrap或未设width/max-width；多行省略中-webkit-line-clamp需配合display: -webkit-box和-webkit-box-orient: vertical，且autoprefixer默认删除该属性，须用/ autoprefixer: off /禁用。
单行省略为什么加了 text-overflow: ellipsis 还没效果
八成是漏了 white-space: nowrap 或容器没设宽度。浏览器默认允许换行，文本一折行，就不存在“向右溢出”，text-overflow: ellipsis 根本不触发。必须三者同时存在：white-space: nowrap、overflow: hidden、text-overflow: ellipsis，且元素得有明确 width 或 max-width（inline 元素还得先设 display: inline-block 或 block）。
多行省略的 -webkit-line-clamp 为什么编译后消失了
Autoprefixer 默认会删掉非标准私有属性，-webkit-line-clamp 就在黑名单里。不干预，SCSS 里写得再全也没用——生成的 CSS 里根本没这行。必须用注释指令关掉 Autoprefixer：
-
/* autoprefixer: off */放在 mixin 定义前，整个块跳过处理（最常用） -
/* autoprefixer: ignore next */只忽略紧跟着的那一行
缺了这步，@include line-clamp(2) 编译出来就是个空壳。
SCSS mixin 怎么写才真正可用
不能只套属性，得把约束条件一起封装进去。比如：
- 单行 mixin 必须包含
white-space: nowrap，且调用时得确认父容器不是 flex-shrink: 0 的受害者 - 多行 mixin 必须带
display: -webkit-box和-webkit-box-orient: vertical，缺一个都失效 - 所有 mixin 都要提醒使用者：必须手动设
width或max-width，否则不生效 - 多行场景下，
line-height建议显式声明，否则不同字体下截断位置可能错位甚至省略号被裁掉
Firefox 和旧 Safari 上多行省略为啥挂了
-webkit-line-clamp 是 WebKit/Blink 私有机制，Firefox 68+ 才开始支持，IE 完全不认，旧版 Edge 也不行。别指望它跨浏览器开箱即用。如果项目要兼容 Firefox 旧版本或 IE，就得准备 fallback 方案——比如伪元素盖省略号 + 固定高度计算，但那需要提前知道行高和行数，灵活性差很多。
实际项目里，能用 -webkit-line-clamp 的地方，就老老实实按它的规则来；别试图绕开 display: -webkit-box，也别指望 text-overflow: ellipsis 自己搞定多行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
