text-wrap: balance在移动端标题上几乎不生效，因其仅对多行且行长差异明显的块触发，而小屏下标题常为单行或仅一个断点；需满足display为block/inline-block、明确max-width、≥8字中文加、禁用white-space: nowrap等全部条件才可能生效。
text-wrap: balance 在移动端标题上几乎不生效——不是写法错，是它根本没触发条件。Chrome 120+ 和 Safari 17.4+ 才支持，且只对真正多行、行长差异明显的块起作用；而移动端小屏下，标题常被渲染为单行，或仅有一个合法断点，算法直接跳过。
为什么加了 text-wrap: balance 标题还是丑？
常见现象不是属性失效，而是浏览器压根没进入平衡计算流程：
-
display不是block或inline-block（比如用了display: inline，或被父级flex压缩成单行） - 没设
max-width或固定width，文本默认撑满容器，没有换行空间 - 内容太短（中文 ≤6 字）或字号太大 → 实际只渲染出 1 行，
balance不会强行拆行 - 同时写了
white-space: nowrap、overflow-wrap: anywhere或word-break: break-all，这些会直接屏蔽平衡逻辑 - 在
flex子项里直接用，但没加min-width: 0，导致 flex 主轴拉伸干扰换行判定
怎样让它在 Chrome/Edge 移动端真正起效？
必须同时满足以下硬性条件（缺一不可）：
- 容器明确设
max-width（如max-width: 280px），不能靠flex或grid自动收缩 - 中文标题 ≥8 字，并手动插入
<wbr></wbr>断点（例如 “国际化支持”、“用户体验 设计”） - CSS 中禁用
white-space: nowrap、overflow-wrap: anywhere - 避免与
text-align: center同时使用——居中会掩盖行长差异，算法直接跳过 - 确保字体已加载完成（
font-display: swap下 fallback 字体先渲染，会导致初版换行错位后再跳变）
更稳的移动端替代方案（不依赖新特性）
与其赌 text-wrap: balance 是否生效，不如用确定性更强的手法：
立即学习“前端免费学习笔记（深入）”；
- 手动插入
<wbr></wbr>：在语义合理处加断点，如 “前端性能 优化”，浏览器兼容性好，iOS Safari 也认 -
word-break: keep-all+hyphens: auto：中文下比balance更易出效果，Firefox/Safari 也支持 - 卡片标题等固定场景，用
display: flex+flex-wrap: wrap+justify-content: center模拟视觉平衡 - 超短标题（2–4 字），直接调
letter-spacing或用clamp()控制字号范围（如font-size: clamp(1.25rem, 4vw, 1.75rem)），比强求多行更可靠
真正容易被忽略的一点：text-wrap: balance 是纯渲染层调整，不改变 DOM 结构。用户截图、打印、阅读模式下，它会退化回默认换行——你看到的“平衡”，只是当前浏览器当前时刻的一次临时重排。
