CSS 引入了一种经典的排版技术,即为平衡文本块手动编写换行符。
text-wrap
的 balance
值是 CSS 文本级别 4 的一部分。看看这篇博文中的示例,了解这行 CSS 可以如何大幅改进您的文本布局。
如果没有 text-wrap: balance
;设计人员、内容编辑者和发布者就有很少的工具可以更改线条的平衡方式。最佳做法是使用 <wbr>
或 ­
来帮助引导文本布局更明智地决定在哪里换行和换行。
作为开发者,您并不知道标题或段落的最终大小、字体大小,甚至是语言。有效且美观地处理文本换行所需的所有变量均位于浏览器中。这就是为什么我们会看到标题换行,如下图所示:
![标题使用开发者工具突出显示,占据了其内嵌空间的全宽,并且第二行有两个悬浮文字。](https://developer.chrome.google.cn/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=5&hl=sv)
.unbalanced {
max-inline-size: 50ch;
}
借助 CSS Text 4 中的 text-wrap: balance
,您可以请求浏览器为文本找到最佳平衡换行解决方案。浏览器确实知道所有因素,例如字体大小、语言和分配区域。浏览器均衡文本换行的结果如下所示:
![标题会像之前的开发者工具一样突出显示,这次没有跨越全宽。它在末尾前开始了新行,因此是平衡的文本块。](https://developer.chrome.google.cn/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=5&hl=sv)
.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% 开始。