一种典型的排版技术,即为平衡的文本块手动编写换行符。
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% 开始。