SCSS中实现长文本折断与强制换行的兼容写法

直接说结论：**长文本的截断（多行省略）与强制换行是完全不同的概念，不能用同一套CSS方案解决。** 若使用SCSS封装，必须将 `-webkit-line-clamp`、`overflow-wrap` 以及降级逻辑分开处理，否则在Safari、Firefox或老旧Android WebView上必然出现兼容性问题。 ## 多行省略：只写一个属性等于无效 很多开发者误以为 `-webkit-line-clamp` 是独立属性，简单添加即可生效。结果却是在Safari中无响应，Firefox完全不识别——问题并非出在 `overflow: hidden`，而是它必须依赖一组“三件套”同时存在： * 必须显式声明 `display: -webkit-box`，如果使用 `display: flex` 或 `display: block` 都会直接导致该机制失效 * `-webkit-box-orient: vertical` 绝不能遗漏，否则文字不会实现多行省略，而是出现单行错位 * 容器必须设置明确的 `width` 或 `max-width`，否则浏览器无法准确计算换行点 关键要点：**使用 `@supports` 进行特性检测比依赖UA判断更加可靠。** * `@supports (-webkit-line-clamp: 1)` 可覆盖Chrome、Safari、新Edge——稳定且兼容 * Firefox 68+ 需要补充 `@supports (line-clamp: 2) or (-webkit-line-clamp: 2)`，并且 `line-clamp` 必须带前缀才能生效 因此，不要试图用一个 `@mixin` 打包所有情况。逻辑必须拆分：先检测支持情况，再编写主方案，最后补充降级方案。 ## 强制换行：不要一上来就用 word-break `word-break: break-all` 是暴力型方案——它会在任意字符处强制打断，例如将 `100px` 拆分成 `100` 和 `px`。而 `overflow-wrap: break-word`（推荐写法，`word-wrap` 是其别名）只在必要时才断词，语义上更为干净。 如何选择？ * **英文段落、URL、代码片段**：直接使用 `overflow-wrap: break-word`，无需额外处理 * **纯数字串、Base64、密钥**等无空格长字符串：才考虑使用 `word-break: break-all` * **保留源码换行并自动折行**：`white-space: pre-wrap` 合适，但需注意它会保留所有空格和制表符 * **中文/日文**下，两个属性的效果接近，但 `word-break: break-all` 仍可能破坏语义分词——能不用尽量不用 ## SCSS 封装：max-height 计算必须严格对齐单位 降级方案依赖 `max-height` + `line-height` 来控制行数。最容易出问题的地方是**单位**： * `line-height` 必须是数值（如 `1.5`）或带 `em` 单位（如 `1.5em`）。**不要使用 `rem`，也不要混用无单位数字** * `max-height` 的计算公式：`line-height × 行数`。例如 `line-height: 1.5em` 限制3行 → `max-height: 4.5em` * `max-height: none` 必须写在 `@supports` 块内，否则WebKit会先按 `max-height` 截断一次，再按 `line-clamp` 截断一次，导致半行文字被切除 还有一个容易被忽略的陷阱：**当父容器宽度不可控时，iOS Safari（尤其是12–14版本）下 `-webkit-line-clamp` 会因 `rem` 动态变化而导致计算失准。** 建议固定使用 `em` 单位 + `font-size: 1`。 ## 伪元素遮盖方案：仅适合纯色背景 使用 `::after` 在右下角叠加渐变遮罩来模拟省略号，看起来优雅，实际限制很多： * 必须添加 `position: relative`，否则伪元素无法精确定位到底部右角 * 背景为渐变、图片或透明时，遮盖完全失效 * 响应式缩放中，如果字体大小使用 `vmin` 或 `clamp()` 动态调整，伪元素尺寸很难同步 * 真要兼容复杂背景，要么使用JS方案，要么接受Firefox/IE下没有省略号的事实 ## 最后提醒：所有截断方案都要求父容器宽度可控 很多问题其实不是SCSS写错了，而是**外层布局没有约束好宽度**，导致 `-webkit-line-clamp` 在iOS Safari下反复计算失准。所以，不要只盯着mixin怎么写，先检查父容器是否设置了 `max-width` 或 `width`。宽度的可控性，才是所有截断逻辑的前提。