单行截断需同时满足text-overflow: ellipsis、white-space: nowrap、overflow: hidden及明确width/max-width；多行截断必须用@supports检测-webkit-line-clamp并配齐display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp和overflow: hidden，否则在safari/firefox/旧webview失效。
单行截断直接用原生 CSS 组合就行，不用 SCSS 封装；多行截断必须拆开逻辑、严格控制单位和降级路径，否则在 Safari/Firefox/旧 WebView 上必然失效。
单行截断：别封装，直接写三行
text-overflow: ellipsis 不是独立属性，它必须和 white-space: nowrap、overflow: hidden、明确的 width 或 max-width 同时存在才生效。SCSS 封装反而容易漏掉某一项，导致局部失效。
- 所有现代浏览器（含 IE9+）都支持这套组合，无需条件判断或 fallback
- 不要给
line-height设rem或百分比值——只接受无单位数字（如1.4）或em - 若容器是 flex item，需额外加
min-width: 0防止宽度撑开
多行截断：必须用 @supports 拆逻辑，不能靠一个 @mixin
很多人把 -webkit-line-clamp 当成普通属性直接塞进样式里，结果在 Safari 不生效、Firefox 完全没反应。根本原因是它依赖“三件套”同时存在：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N，缺一不可。
-
@supports (-webkit-line-clamp: 1)比 UA 判断更可靠，覆盖 Chrome/Safari/新版 Edge - Firefox 68+ 支持
@supports (line-clamp: 2) or (-webkit-line-clamp: 2)，但必须带前缀才生效 - 容器必须有明确
width或max-width，否则换行点算不准，省略号位置飘移 - 避免和
text-align: justify共用，WebKit 下省略号可能错位
降级方案：max-height 计算必须对齐 line-height 单位
当 @supports 不成立时，靠 max-height + line-height 控制行数是最稳的 fallback。这里最容易出错的是单位混用和计算偏差。
-
line-height必须是数值（如1.5）或em（如1.5em），禁用rem、px或无单位数字混搭 -
max-height=line-height × 行数，例如line-height: 1.4em限 2 行 →max-height: 2.8em -
max-height: none必须写在@supports块内，否则 WebKit 会先按max-height截一次、再按line-clamp截一次，导致内容被双层裁剪
强制换行与多行截断是两件事，不能混用
长文本折断（多行省略）和强制换行（break-word）是完全独立的问题，共用同一套 SCSS 逻辑一定会在 Safari/Firefox/旧 Android WebView 上失效。
- 多行省略用
-webkit-line-clamp三件套 +@supports检测 - 强制换行优先用
overflow-wrap: break-word（word-wrap是别名），只在纯数字串、Base64 等无空格场景才考虑word-break: break-all -
white-space: pre-wrap适合保留源码换行+自动折行，但会保留所有空格和制表符，慎用于用户输入文本
真正难的不是写对那一段 SCSS，而是理解 -webkit-line-clamp 不是属性而是机制——它依赖 display 模式、方向、宽度、溢出策略四者协同。漏掉任意一环，就只剩 fallback 在干活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
