text-wrap: balance 是 css 属性，仅在 chrome 117+ 和 safari 17.4+ 支持，用于多行块级元素中均衡各行字数，但不控制断词、缩放或宽度，需满足 width/max-width、display: block 等前提条件。
text-wrap: balance 是什么，它真能自动“美化”标题换行？
text-wrap: balance 不是魔法，它只在多行文本中尝试让各行字数尽可能均等——比如 12 个字分两行，它会尽量凑成「6+6」而不是「4+8」或「1+11」。但它不控制断词位置、不缩放字号、不调整宽度，纯靠浏览器对当前已渲染文本的行宽测量后重排。目前仅 Chrome 117+ 和 Safari 17.4+ 支持，Firefox 和旧版 Edge 完全忽略该声明。
- 它只对
display: block或inline-block的多行元素生效（单行标题无效） - 必须有明确的
width或max-width，否则无“平衡”基准 - 对中英文混排、CJK 文本效果有限，因为断行点本身就不稳定
- 如果字体还没加载完（
font-display: swap下用 fallback 字体先渲染），balance 会按错误字宽计算，导致换行错位后再跳变
为什么直接加 text-wrap: balance 后标题没变化？
常见原因不是代码写错，而是前提条件没满足：
- 标题用了
white-space: nowrap或display: inline→ 移除或改为block - 父容器没设宽度，或者用了
width: fit-content→ 改为width: 100%或带单位的max-width - 标题只有一行（内容太短或字号太大）→ 它不会强行拆成两行，只优化已有换行
- 用了
word-break: break-all或overflow-wrap: anywhere→ 这些会覆盖 balance 的行宽分配逻辑，优先级更高 - 在伪元素（如
::before）或flex子项上直接使用 → 需确保该元素自身可换行且不受父 flex 主轴约束
如何让 text-wrap: balance 实际起效，又不崩坏其他设备？
把它当渐进增强用，而不是兜底方案：
- 只在支持的浏览器中启用：
@supports (text-wrap: balance) { h1, h2 { text-wrap: balance; line-height: 1.3; } } - 配合
clamp()控制字号范围，避免小屏下字太大撑单行：font-size: clamp(1.5rem, 4.5vw, 2.25rem); - 加
min-width: 0防止 flex 布局中标题被拉伸变形（尤其在flex: 1容器里） - 中文标题务必加
word-break: keep-all，否则 balance 可能按字符而非词语切分，造成「用户体验」变成「用户 体验」 - 不要和
text-overflow: ellipsis同时用——ellipsis 只作用于单行，与 balance 冲突
真正麻烦的不是 balance 本身，而是它暴露了更底层的问题
text-wrap: balance 就像一个高亮灯：它一开，你立刻会发现——原来标题在不同设备上换行点不一致，是因为字体加载时机不同；原来“美观”标准模糊，是因为没定义清楚“什么叫合理断句”；原来响应式失效，是因为把所有标题都塞进同一个 max-width，而没区分「品牌名」「副标题」「长活动文案」的语义长度。
它不解决根本，但逼你直面这些：字体加载策略是否合理、中文断词是否有语义保护、容器宽度是否真的匹配内容密度。把这些理清了，text-wrap: balance 才不是锦上添花，而是水到渠成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
