一种典型的排版技术，即为平衡的文本块手动编写换行符。
text-wrap 的 balance 值是 CSS Text Level 4 的一部分。请查看这篇博文中的示例，了解这一行 CSS 如何大幅改进您的文本布局。
如果没有 text-wrap: balance；设计人员、内容编辑器和发布者使用一些工具来更改行的平衡。目前的最佳方案是使用 <wbr> 或 ­ 来帮助引导文本布局，从而更明智地决定在何处换行和字词。
作为开发者，您不知道标题或段落的最终大小、字体大小，甚至是语言。有效且美观处理文本换行所需的所有变量均在浏览器中提供。这就是我们看到标题换行的原因，如下图所示：
.unbalanced {
max-inline-size: 50ch;
}
借助 CSS 文本 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 没有那么好。例如，卡片（或任何有边框或阴影的容器）内部的标题。
均衡文本换行具有讽刺意味，会导致包含的元素出现失衡。
浏览器所使用的技术的简要说明
浏览器会有效地针对最小宽度执行二进制搜索，搜索不会产生任何额外的行，在 1 个 CSS 像素（而不是显示像素）处停止。为了进一步减少二进制搜索中的步骤，浏览器从平均线宽的 80% 开始。