text-wrap: balance 失效主因是未满足多行块级元素+明确宽度约束条件，中文需配 word-break: keep-all，禁用 white-space: nowrap、text-overflow: ellipsis 及冲突换行属性，并注意字体加载时机影响。
text-wrap:balance 为什么加了没反应
最常见的情况不是写错了，而是它根本没触发——text-wrap: balance 只对多行块级元素生效，且必须有明确的宽度约束。如果标题只有一行（比如内容短、字号大、容器宽），它不会强行拆行，更不会“优化”单行；如果用了 white-space: nowrap 或 display: inline，它直接被忽略。
常见失效组合：
-
display: inline→ 改成display: block或inline-block - 父容器用
width: fit-content或没设宽 → 改为带单位的max-width（如max-width: 36rem） - 同时写了
word-break: break-all或overflow-wrap: anywhere→ 这些声明优先级更高，会覆盖 balance 的行宽重排逻辑 - 用在 flex 子项上但没设
min-width: 0→ flex 默认不收缩，导致文本无法换行
中文标题必须配 word-break: keep-all
中文没有空格分隔，浏览器默认按字符断行，text-wrap: balance 会把「用户体验」切成「用户」和「体验」两行，视觉上反而更割裂。加上 word-break: keep-all 才能确保按词语（而非单字）切分，这是中文场景下真正起效的前提。
别忘了加 @supports 守住底线：
@supports (text-wrap: balance) {
h1, .card__title {
text-wrap: balance;
word-break: keep-all;
line-height: 1.3;
}
}
不加 word-break: keep-all，balance 在中文里基本等于没开。
不能和 text-overflow: ellipsis 共存
text-overflow: ellipsis 只作用于单行元素，而 text-wrap: balance 要求多行。两者同时存在时，浏览器会优先执行 ellipsis 的截断逻辑，导致 balance 完全失效，甚至可能让标题消失。
如果你需要响应式缩放+平衡换行，改用 font-size: clamp(1.5rem, 4.5vw, 2.25rem) 配合 max-width，比硬上 ellipsis 更可靠。
字体加载延迟会让 balance “算错”
如果用了 font-display: swap，fallback 字体先渲染，text-wrap: balance 会按 fallback 的字宽做行宽分配；等自定义字体加载完成，字宽变化，整行重排，出现“跳变”。这不是 bug，是它基于当前渲染状态计算的必然结果。
缓解办法只有两个：
- 用
font-display: optional或block，牺牲一点首屏速度换稳定性 - 给标题加
transition: all 0.2s，弱化跳变感（但不能根治）
真正麻烦的从来不是 balance 本身，而是它一开，你就没法再假装忽略字体加载时机、CJK 断词规则、flex 布局收缩行为这些底层细节了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
