单个 @mixin multiEllipsis 无法覆盖所有场景，因 -webkit-line-clamp 在 Firefox、旧 WebView 或部分 Safari 中必然失效，必须满足 display: -webkit-box、-webkit-box-orient: vertical、明确 width/max-width、保留 text-overflow: ellipsis 四条件，并用 @supports 拆逻辑、严格计算 max-height、分离截断与换行逻辑，且父容器需有明确宽度。
直接结论：别用单个 @mixin multiEllipsis 覆盖所有场景——它在 Firefox、旧 WebView 或 Safari 某些版本里必然失效，除非你同时满足四条硬性条件且封装了降级逻辑。
为什么 -webkit-line-clamp 单独写会失效
很多人复制粘贴一段“三件套”就完事，结果在 Safari 里截断错位、Firefox 里完全没反应。根本原因不是漏了 overflow: hidden，而是：
• display: -webkit-box 必须显式声明，display: flex 或 block 会让整个机制静默失败
• -webkit-box-orient: vertical 缺一不可，漏掉会导致只显示一行或文字堆叠错乱
• 容器必须有明确的 width 或 max-width，否则换行位置算不准，-webkit-line-clamp 就是摆设
• text-overflow: ellipsis 对多行本身无效，但它在部分 Safari 版本中能稳定末尾省略号渲染，建议保留
必须用 @supports 拆逻辑，不能靠 UA 判断
检测浏览器能力比猜 UA 可靠得多，而且更简洁：
• 写 @supports (-webkit-line-clamp: 1) 覆盖 Chrome/Safari/新版 Edge
• Firefox 68+ 需额外加 @supports (line-clamp: 2) or (-webkit-line-clamp: 2)，注意 line-clamp 不带前缀在 Firefox 里不生效
• 不要写 @supports (display: -webkit-box) —— 这个属性太宽泛，无法准确反映 -webkit-line-clamp 是否可用
• @supports 块内必须重置 max-height: none，否则 WebKit 会先按 max-height 截一次、再按 line-clamp 截一次，造成双重截断
降级方案里 max-height 计算最容易出错
fallback 不是随便设个高度就行，单位和乘法必须严格对齐：
• line-height 必须是数值（如 1.5）或带 em 单位（如 1.5em），禁用 rem 或混用无单位数字
• max-height = line-height × 行数，例如 line-height: 1.4em 限 3 行 → max-height: 4.2em
• 父容器不能有 padding 或 border 干扰高度计算，否则实际可显示行数会少于预期
• 中文环境慎用 word-break: break-all 强制换行来“辅助”截断——它会破坏语义分词，比如把“人工智能”拆成“人工智”和“能”
立即学习“前端免费学习笔记（深入）”；
SCSS 封装时必须分离“截断”和“换行”逻辑
长文本折断（多行省略）和强制换行是两类问题，混在一起封装只会让兼容性雪上加霜：
• 多行省略用 -webkit-line-clamp + @supports + max-height fallback
• 强制换行用 overflow-wrap: break-word（推荐，语义干净）或 word-break: break-all（仅限纯数字串、Base64 等无空格长字符串）
• white-space: pre-wrap 适合保留源码换行 + 自动折行，但会保留所有空格和制表符，别误用于普通正文
• 如果你封装的 @mixin truncate-lines 里悄悄加了 word-break，那在 Safari/Firefox/旧 Android WebView 上，它大概率既不省略也不换行——因为两套机制互相干扰
最常被忽略的一点：调用这个 mixin 的元素，父容器必须有明确宽度；如果它嵌在 flex: 1 或 width: fit-content 的容器里，-webkit-line-clamp 就会彻底失灵——这不是 bug，是它的设计前提。
