`text-wrap: balance` 实战指南：让多行标题自动排版更优美

你是否见过这种尴尬场景：两行标题第一行很长，第二行只有几个字，看起来空空荡荡？过去我们只能用 JS 手动测量文字宽度来做分行优化，而现在一个 CSS 属性就能解决。

🧠 什么是 `text-wrap: balance`？

text-wrap 是 CSS 控制文本换行行为的属性，其中新增的 balance 值，允许浏览器在渲染时自动重新分配换行点，让每一行的长度更接近，从而提升排版平衡感。

html 复制代码

<h1 class="title">
  CSS 新特性 text-wrap: balance，让标题更好看
</h1>

css 复制代码

.title {
  text-wrap: balance;
}

📌 浏览器会自动在合适的单词或字符位置换行，使两行（或多行）长度更接近。

html 复制代码

<h2 class="article-title">
  前端性能优化必备技巧与实战案例分享
</h2>

css 复制代码

.article-title {
  font-size: 2rem;
  line-height: 1.2;
  text-wrap: balance;
}

✅ 效果：标题在窄屏时会自动调整换行，让视觉上左右两行更平衡。

css 复制代码

h1, h2, h3 {
  text-wrap: balance;
}

@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
}

📌 即使字体大小变化，balance 仍会重新计算最佳换行点。

text-wrap: balance 是一个"低代码"甚至"零代码"的视觉优化神器，让多行文本的排版不再依赖繁琐的 JS 计算，是响应式和内容型网站必备的新武器。