CSS 引入了一种经典的排版技术,即为平衡文本块手动编写换行符。
text-wrap
的 balance
值是 CSS 文本级别 4 的一部分。查看这篇博文中的示例,了解
这行 CSS 代码可以极大地改进您的文字布局。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
不使用 text-wrap: balance
;内容编辑和发布商
一些工具
更改线条的平衡方式...最佳做法是
<wbr>
或
­
,以便提供帮助
指导文字布局,让您更明智地决定在哪里换行和换行。
作为开发者,您并不知道应用的最终大小、字体大小,甚至 标题或段落。有效且美观需要的所有变量 对文本换行的处理方式。这就是为什么我们会看到 封装方式如下图所示:
<ph type="x-smartling-placeholder">![标题使用开发者工具突出显示,占据了其内嵌空间的全宽,并且第二行有两个悬浮文字。](https://developer.chrome.google.cn/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=9&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=9&hl=sv)
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
并排查看、静止状态、不叠加调试信息都很有帮助。
用户应该会对均衡的文本块感到更满意。它会抓取 更便于用户注意力,而且总体来说更易于阅读。
找出平衡点
读者首先会看到标题;既应具有视觉吸引力 易于阅读。这样既能吸引用户的注意力,又能给人以优质和 保证。良好的排版可以增强读者的信心,鼓励他们 继续阅读。
传统上,这项任务是由设计师手动或光学完成的, 平衡文本的目的是取悦用户,而不是数学。这个主题通常是 这称为公制对齐与光学对齐。对于像 《纽约时报》, 标题的平衡是非常重要的用户体验细节。
<ph type="x-smartling-placeholder">平衡排版中的文本,可以追溯到打印的早期, 会手写输入字母。随着工具和技术的不断发展,结果也在不断发展。 如今,设计师需要通过颜色、粗细、尺寸等来平衡文字, 自己的设计
但在网络上,由于文档会发生变化,
大小和颜色。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">性能考虑因素
建议不要将文本换行平衡应用于整个设计。这是一个 由于 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%。