CSS 文本平衡与断字：text-wrap balance 与 hyphens 实战

---

title: CSS 文本平衡与断字：text-wrap balance 与 hyphens 实战

keywords:

• text-wrap
• balance
• pretty
• hyphens
• overflow-wrap

description: '说明文本换行与断字的现代策略，使用 text-wrap: balance/pretty 与 hyphens: auto 优化标题与正文排版，并给出示例与兼容建议。'

categories:

• 文章资讯
• 编程技术

---

概述

现代浏览器提供 text-wrap 的平衡与美化策略以及 hyphens 自动断字，可显著提升标题的美观与可读性，减少不均匀行长与溢出问题。

示例

.title { text-wrap: balance }
.paragraph { hyphens: auto; overflow-wrap: anywhere }
.pretty { text-wrap: pretty }

工程建议

• 目标化应用：对多行标题使用 balance；正文在长单词/URL 场景启用 hyphens 与 overflow-wrap。
• 兼容与回退：使用特性查询与级联层控制，保持旧浏览器的可读性。
• 性能与国际化：为不同语言准备断词词典与分词策略；避免过度重排。

参考与验证

• MDN 文本换行与断字文档：https://developer.mozilla.org/docs/Web/CSS/text-wrap
• web.dev Balanced wrapping 文章：https://web.dev/articles/css-text-wrap-balance
• Chrome 平台文档（text-wrap）：https://developer.chrome.com/docs/web-platform/text-wrap/