CSS 引入了一种经典的排版技术，即为平衡文本块手动编写换行符。
text-wrap 的 balance 值是 CSS 文本级别 4 的一部分。看看这篇博文中的示例，了解这行 CSS 可以如何大幅改进您的文本布局。
如果没有 text-wrap: balance；设计人员、内容编辑者和发布者就有很少的工具可以更改线条的平衡方式。最佳做法是使用 <wbr> 或 ­ 来帮助引导文本布局更明智地决定在哪里换行和换行。
作为开发者，您并不知道标题或段落的最终大小、字体大小，甚至是语言。有效且美观地处理文本换行所需的所有变量均位于浏览器中。这就是为什么我们会看到标题换行，如下图所示：
.unbalanced {
max-inline-size: 50ch;
}
借助 CSS Text 4 中的 text-wrap: balance，您可以请求浏览器为文本找到最佳平衡换行解决方案。浏览器确实知道所有因素，例如字体大小、语言和分配区域。浏览器均衡文本换行的结果如下所示：
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
并排查看、静止状态、不叠加调试信息都很有帮助。
用户应该会对均衡的文本块感到更满意。它更能吸引注意力，并且总体上更易于阅读。
找出平衡点
标题是读者首先看到的内容，它们应具有视觉吸引力，易于阅读。这样可以吸引用户的注意力，并提供质量和保证。良好的排版可以增强读者的信心，吸引他们继续阅读。
一直以来，这项任务都是通过手动或光学方式完成的，因为设计师在调整文本时想要兼顾视觉吸引力而不是数学运算。此主题通常称为公制对齐与光学对齐。对于像纽约时报这样的大型出版物，标题平衡是一项非常重要的用户体验细节。
要平衡排版中的文本，可以追溯到打印的早期，那时打印机会手动放置字母。随着工具和技术的不断发展，成效也在不断变化。 如今，设计师需要调整颜色、粗细、尺寸等，以平衡设计中的文本。
但在 Web 上，可用的控制较少，因为文档会根据用户改变大小和颜色。text-wrap: balance 以印刷行业设计师的工作和传统为基础，以自动化方式将文字平衡的艺术融入到了网络上。
平衡标题
这将并且应该是 text-wrap: balance 的主要用例。根据大小画出眼睛，使其对称且清晰易读。请使用以下 CSS 将所有标题设置为均衡文本换行：
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
仅应用此样式可能无法为您提供预期结果，因为文本需要换行，因此会从某些位置应用最大行长度。您将在这篇博文中的示例中看到设置了 max-inline-size，此样式与 max-width 类似，但对于任何语言，您都可以设置一次。
限制
平衡文本的任务不是免费的。浏览器需要反复进行迭代，以发现最佳平衡封装解决方案。此性能成本可通过规则降低，仅适用于 6 行及以下换行的行。
性能考虑因素
建议不要将文本换行平衡应用于整个设计。由于存在 6 行限制，这是一种浪费的请求，可能会影响网页渲染速度。
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
此功能的一大优势在于，您无需像现在使用 JavaScript 那样等待和时间来平衡文本换行与字体加载。浏览器会搞定它！
与 white-space 属性的互动
平衡文本会与 white-space 属性竞争，因为一个属性要求不换行，而另一个属性要求平衡换行。您可以通过取消设置空白空间属性来解决此问题，然后平衡封装就可以再次应用。
.balanced {
white-space: unset;
text-wrap: balance;
}
均衡不会改变元素的内嵌尺寸
对于实现均衡文本换行，一些 JavaScript 解决方案有一个优势，因为它们会更改包含元素本身的 max-width。这还有一个好处，就是“缩减封装”到平衡块。text-wrap:
balance 则没有这种效果，如以下示例所示：
看看开发者工具中显示的宽度在最后是一大片额外的空间吗？
这是因为它仅是一种封装样式，而非大小会改变的样式。因此，至少在我看来，在某些情况下，text-wrap: balance 并不是那么好。例如，卡片内的标题（或任何带有边框或阴影的容器）。
均衡的文本换行会造成所含元素的不平衡。
浏览器所用技术的简要说明
浏览器会有效地对最小宽度执行二进制搜索，且不会产生任何其他行，以一个 CSS 像素（而不是显示像素）停止。为了进一步减少二进制搜索中的步骤，浏览器会从平均线条宽度的 80% 开始。