CSS 文本换行:平衡

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

Adam Argyle
Adam Argyle

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

浏览器支持

  • Chrome:114。 <ph type="x-smartling-placeholder">
  • 边缘:114。 <ph type="x-smartling-placeholder">
  • Firefox:121。 <ph type="x-smartling-placeholder">
  • Safari:17.5。 <ph type="x-smartling-placeholder">

来源

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 试用演示版

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

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

<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> <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> <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%。