text-wrap: balance 无法被其他换行属性模拟，因其仅重排已有换行的字数分布而不改断词或字号；需用 @supports (text-wrap: balance) 检测并谨慎降级，守住宽度约束、换行能力与 ellipsis 冲突三底线。
为什么不能直接 fallback 到其他换行属性
text-wrap: balance 的行为无法被 word-break、overflow-wrap 或 white-space 任意组合模拟——它不改变断词位置，也不缩放字号，只在已有换行前提下重排字数分布。试图用 word-break: keep-all 或 overflow-wrap: break-word “代替”它，结果往往是单行撑出容器，或中英文混排时出现「用 户体验」这种错误切分。
@supports 是唯一可靠的前提判断方式
Firefox 和旧版 Edge 完全忽略 text-wrap: balance，且不会触发任何降级逻辑。必须用特性检测包裹：
@supports (text-wrap: balance) {
h1, .card-title {
text-wrap: balance;
word-break: keep-all; /* 中文防误断 */
}
}
注意：@supports not (text-wrap: balance) 不推荐——它会把 Safari 17.3 和 Chrome 116 也排除在外，而它们其实已支持部分实验性实现，只是未公开启用。
降级时要守住三个底线
- 保留
max-width或width：没有宽度约束，balance无基准，降级后文本更易溢出 - 禁用
white-space: nowrap和display: inline：这些会让降级后的文本彻底失去换行能力 - 避免和
text-overflow: ellipsis共存：ellipsis 只作用于单行，与 balance 的多行逻辑冲突，降级后可能显示为空白
真正需要手动干预的场景
当标题在小屏上因字体加载延迟导致首次渲染错位（fallback 字体字宽 ≠ 实际字体），text-wrap: balance 会按错误宽度计算并跳变。此时降级不是加 polyfill，而是提前控制变量：
- 用
font-display: block延迟首屏渲染，等字体加载完再显示标题 - 给标题加
min-width: 0，防止 flex 容器中被拉伸变形 - 配合
font-size: clamp(1.5rem, 4.5vw, 2.25rem)，从源头限制单行可能性
平衡不是目的，可控才是。浏览器没实现时，别硬凑效果；实现了，也别指望它解决字体、布局、语义层面的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
