CSS 文本换行：平衡

CSS 引入了一种经典的排版技术，即为平衡文本块手动编写换行符。

Adam Argyle

text-wrap 的 balance 值是 CSS 文本级别 4 的一部分。查看这篇博文中的示例，了解 这行 CSS 代码可以极大地改进您的文字布局。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 114
• <ph type="x-smartling-placeholder"></ph> 114
• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 17.5

来源

<ph type="x-smartling-placeholder">

</ph>

试用演示版

不使用 text-wrap: balance；内容编辑和发布商 一些工具 更改线条的平衡方式...最佳做法是 <wbr> 或 ­，以便提供帮助 指导文字布局，让您更明智地决定在哪里换行和换行。

作为开发者，您并不知道应用的最终大小、字体大小，甚至 标题或段落。有效且美观需要的所有变量 对文本换行的处理方式。这就是为什么我们会看到 封装方式如下图所示：

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 试用演示版

.unbalanced {
  max-inline-size: 50ch;
}

借助 CSS Text 4 中的 text-wrap: balance，您可以请求浏览器 为文本找出最佳均衡换行解决方案。浏览器 确实知道所有因素，例如字体大小、语言和分配区域。 浏览器均衡文本换行的结果如下所示：

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 试用演示版

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

并排查看、静止状态、不叠加调试信息都很有帮助。

用户应该会对均衡的文本块感到更满意。它会抓取 更便于用户注意力，而且总体来说更易于阅读。

找出平衡点

读者首先会看到标题；既应具有视觉吸引力 易于阅读。这样既能吸引用户的注意力，又能给人以优质和 保证。良好的排版可以增强读者的信心，鼓励他们 继续阅读。

传统上，这项任务是由设计师手动或光学完成的， 平衡文本的目的是取悦用户，而不是数学。这个主题通常是 这称为公制对齐与光学对齐。对于像 《纽约时报》， 标题的平衡是非常重要的用户体验细节。

<ph type="x-smartling-placeholder">

</ph>

试用演示版

注意：平衡主要文章文本的情况并不常见，因为它不是 需要脱颖而出或吸引读者的注意力。

平衡排版中的文本，可以追溯到打印的早期， 会手写输入字母。随着工具和技术的不断发展，结果也在不断发展。 如今，设计师需要通过颜色、粗细、尺寸等来平衡文字， 自己的设计

但在网络上，由于文档会发生变化， 大小和颜色。text-wrap: balance将 以自动化方式平衡文本到 Web，基于工作和 设计者的传统。

平衡标题

这将并且应该是 text-wrap: balance 的主要用例。平局 调整眼睛大小，使其对称且清晰可辨。设置 所有标题，并采用以下 CSS 均衡文本换行：

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

仅应用此样式可能无法取得您期望的结果，因为 文本需要换行，因此行长度上限从 您会看到 max-inline-size 设置，此样式与 max-width 类似，但可以设置 针对任意语言创建一次

限制

平衡文本的任务不是免费的。浏览器需要遍历 迭代以发现最佳平衡的封装解决方案。此次性能 可以通过规则降低费用，但它仅适用于 6 行及以下换行。

<ph type="x-smartling-placeholder">

</ph>

试用演示版

性能考虑因素

建议不要将文本换行平衡应用于整个设计。这是一个 由于 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 像素处停止（不是 Pixel）。为了进一步减少二进制搜索中的步骤，浏览器首先 平均线宽的 80%。