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

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;
}

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

---

🧪 实战一：文章标题美化

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

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

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

---

🧪 实战二：配合响应式布局

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

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

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

---

🌟 高级技巧

1. 配合 hyphens: auto; 在长单词或英文中，允许自动断字，排版更自然。

2. 局部应用 避免对大量正文使用 balance（可能会轻微增加渲染成本），主要用于标题、副标题、按钮文字等。

3. 与渐变文本结合 让标题不仅换行美观，还能配合 background-clip: text 做出更炫的视觉效果。

---

🌐 浏览器支持（2025）

浏览器	支持情况
Chrome 114+	✅
Edge	✅
Safari 17+	✅
Firefox	⚠️ 开发中

---

⚠️ 注意事项

• 对于需要精确换行控制的设计稿，balance 会带来动态变化，需要提前确认设计可接受；
• 如果文字过短或本身居中对齐，效果可能不明显；
• 多语言排版可能有不同的平衡算法。

---

✨ 一句话总结

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

---