前言

主要介绍了 WebKit 中实现的 text-wrap: pretty 功能，它通过改进文本排版方式，提升了网页上的排版质量。今日前端早读课文章由 @Jen Simmons 分享，@飘飘翻译。

译文从这开始～～

Safari 技术预览版刚刚加入了对 text-wrap: pretty 的支持，为网页排版带来了前所未有的精致感。让我们先来看看 WebKit 版本的 pretty 实际做了什么 —— 它可能比你想象中强大得多。然后我们会将它与 balance 以及其他 text-wrap 的值进行对比，帮助你了解在不同场景下该选择哪一个。

对 “好” 排版的认知，深深扎根于手工排版的时代，那时人们用金属、木头或油墨来排字。排版工人会非常谨慎地决定一个词是留在行末、移到下一行，还是用连字符断开。他们的努力提升了阅读理解力，减轻了眼睛疲劳，也让阅读体验更加舒适。虽然 “美” 的标准因人而异、存在争议，但世界各地在排版上都有着根深蒂固的传统，这些传统代表着不同的语言与文字体系，也承载着人们的文化，代代相传，历久弥新。

在数字排版中，是计算机而非人工来放置所有文字。作为网页设计师或开发者，你通常只是创建一个模板，内容可能随时被替换。在网页上，尤其是当布局是流式布局，会根据不同形状和大小的屏幕重新排版时，根本不存在对排版进行 “手动微调” 的情况。那么，在依靠现代计算机自动化排版的同时，我们还能如何传达传统排版中对品质的追求呢？

一种解决方案就是 text-wrap: pretty。它通过段落级的算法来解决长期存在的排版问题，从而让网页上的文字更精致、更美观。

更好的排版体验

某些排版传统教给我们的原则包括：

• 避免短行结尾：最好不要让段落的最后一行只剩一个词。这种情况看起来会很奇怪，还可能让段落之间的间距看起来异常地大。

• 避免 “参差不齐” 的边缘（bad rag）：可以查看文本的参差不齐的边缘（行内结束侧），并留意各行的总体长度是否大致一致，还是参差不齐。手工排版时，排字师会调整词语的位置，让相邻行之间的视觉差异最小化，以避免边缘过于参差不齐。边缘整齐（good rag）会让文本更易读，整体也更美观。

• 避免糟糕的断字：对于可以使用连字符的语言，连字符有助于形成良好的字距。但断字会把一个词拆成两部分，并把它们放在两行的末尾和开头，这会增加阅读的认知负担。最好减少断字的使用，特别是避免连续两行都出现断字。

• 避免出现 “河流” 现象：如果你知道该留意什么，就可能注意到有时段落中词与词之间的空格会在多行中对齐，形成一条明显的空白通道。这种 “河流” 现象会分散注意力。

你可以在下面这个例子中看到这四个问题的表现。左右两边的文字内容是完全一样的。

设计师和排版师经常使用断字（hyphenation）和 / 或文本对齐（justification）来改善段落边缘的参差不齐（rag），但在网页上，这两种方法的效果往往不尽如人意。直到最近，网页排版对于短行结尾、不整齐的边缘或 “排版河流” 等问题几乎无能为力。我们只能忍受它们的存在。

网页文本换行的历史：从 1991 年开始

过去 30 多年来，网页排版只有一种确定文本换行位置的技术。

浏览器从第一行文字开始，一字一句地往里排，直到这一行的空间用完。如果还有剩下的内容，就换到下一行继续排。如果开启了换行功能，浏览器会在空间不足的时候立刻换行，然后继续处理下一行。

它始终是 “一行一行” 地处理，排满一行之后立即换行。如果启用了连字符功能，它会在行尾的最后一个单词上进行连字符分割，分割点会尽可能多地保留该单词在前一行的部分。除此之外，它不会考虑更多的排版因素 —— 这也正是网页上常见 “丑 rag”、“短结尾”、“乱断字” 和 “排版河流” 等问题的原因。

其实，并不是因为是计算机排版就一定得这样。几十年来，像 Adobe InDesign 和 LaTeX 这样的软件就已经能在排版时同时评估多行文本，从而决定最佳的换行位置。只是网页排版过去一直没有使用多行算法 —— 直到现在。

我们很高兴地宣布，这一功能首次在网页上实现，并已在 Safari Technology Preview 216 中推出。

text-wrap: pretty 登场

现在，网页排版也能在判断换行位置时考虑整段文字的整体结构了。只需使用 text-wrap: pretty，你就可以告诉浏览器这样做。WebKit 并不是第一个实现该功能的浏览器引擎，但我们是第一个用它来评估和优化整个段落排版的浏览器，也是第一个通过它来改善 rag 效果的浏览器。我们在实现时选择了更全面的方法，因为我们希望你能够用这个 CSS 属性，让网页文字更易读、更舒适，提升用户的阅读体验和可访问性，当然，也让网页看起来更漂亮。

Safari Technology Preview 216 可以防止段落结尾出现短行，改善文本边缘的整齐程度，还能减少对断字的依赖 —— 无论文本有多长都有效。不过，目前我们还没有实现自动调整以避免 “排版河流”，但这在未来是我们想尝试的方向。

虽然 text-wrap: pretty 早在 2023 年秋季就已在 Chrome 117、Edge 177 和 Opera 103 中上线，并于 2024 年支持了 Samsung Internet 24，但 Chromium 的实现功能相对有限。根据 Chrome 团队的一篇文章，Chromium 只会对段落最后四行做优化，主要是为了防止短行结尾。如果段落最后有连续的断字行，它也会做出一些调整。

其实，CSS 工作组设计 pretty 的初衷，是希望每个浏览器都尽其所能地改进文本换行方式。在 CSS Text Level 4 的规范中，它是这样定义的（其中 “user agent” 是指浏览器，重点部分已加粗）：

浏览器可以（但不限于）尝试避免段落末尾出现过短的行…… 同时也应该在其他方面改进排版。具体的改进方式由各个浏览器自行决定，可能包括：减少各行长度的变化幅度、避免排版河流、优先考虑不同类型的软换行点、断字点或对齐机会，避免连续多行都使用断字。

这里使用的 “may”（可以） 这个词非常重要，它明确表示每个浏览器可以自主决定 pretty 的具体实现方式，并没有强制要求所有浏览器做出相同的选择。实际上，一个浏览器团队可能在 2025 年对某些排版特性做出支持，未来又会改变其实现方式。

由于 Chrome 的实现方式让很多开发者产生误解，大家以为 pretty 的作用只是防止段落结尾出现短行。但这其实并不是它的本意。事实上，CSS 工作组已经为这种特定需求定义了另一个属性值，它在上周刚被正式命名为 text-wrap: avoid-short-last-lines。

实际试试看

你现在就可以在 Safari Technology Preview 216 中试用 text-wrap: pretty。可以查看这个演示，切换 pretty 的开启与关闭状态，观察它带来的效果。你还可以开启或关闭断字、对齐等功能，尝试各种组合方式。开启辅助线或 “幽灵显示” 功能，有助于你理解背后的排版变化。也可以试试 text-wrap: balance，看看两者的区别。这个演示还提供了英文、阿拉伯文、德文、中文和日文内容，让你能观察 pretty 在不同文字系统下的表现。

试试在 Safari Technology Preview 216 中体验这个演示。
https://codepen.io/jensimmons/pen/xxvoqNM?editors=1100

以下是一个英文文本示例，未使用 text-wrap，也就是网页多年来使用的默认换行算法。我打开了 “显示辅助线（show guides）” 选项，用来标记文本框的边缘。绿色的垂直线标记了文本框的 inline-end 边界 —— 浏览器的排版算法会尽量让每一行都延伸到这个绿色线的位置。当文本达到这个边界时，浏览器就会换行。

三段文本，绿色的垂直线标记了文本框的右侧边缘。

接下来是同样的文本，但这次应用了 text-wrap: pretty。你会发现绿色的边界线移动了。现在，浏览器的换行目标不再是文本框的最大宽度，而是提前一些换行，大约在一个范围之间换行，一定在洋红色线之后，也一定在红色线之前。这样可以改善文本边缘的参差不齐现象（rag）。

同样的文本示例，边缘更加整齐。辅助线显示有三条垂直线，间距大约 50 像素 —— 最右侧是红色线，左边 45 像素是绿色线，再往左 45 像素是洋红色线。

你还可以开启 “显示幽灵（show ghosts）”，查看优化前的版本作为背景对比。

同样的文本，排版更整齐的版本用正常颜色显示，旧版本（排版较差）用淡青色作为背景叠在后面，形成一个 “幽灵” 效果，让你清楚看到哪些行发生了变化，以及如何变化的。

此外，你还可以开启或关闭断字（hyphenation）和对齐（justification）功能，试试不同组合的效果。改变浏览器窗口的宽度，观察文字在不同宽度下的排版表现。

你可能会注意到，Safari Technology Preview 是对整段文本的每一行都应用 pretty，而不是像其他浏览器那样只优化最后几行。因此，它对文本的整体影响更明显，整块文字呈现出一种更为 “整齐的矩形块” 效果。

你真的得自己试着给正文文本加上 text-wrap: pretty，才能感受到它带来的巨大差异。它的效果虽然不夸张，但却很惊艳。如果你再配合使用段落间距为 1lh，排版看起来会非常棒。

那么，为什么不是每个浏览器都全力优化排版呢？原因就是性能问题。

性能表现

许多开发者会担心 text-wrap: pretty 对性能的影响。虽然更好的排版视觉体验非常重要，但也不能以牺牲网页加载速度为代价。各浏览器团队在设定优化范围时，必须考虑用户所使用的设备性能和芯片能力。

我们对 Safari 所做的优化感到非常满意 —— 即使网页开发者在页面上大量使用 text-wrap: pretty，Safari 用户也不会感受到性能下降。

有一点开发者需要了解：text-wrap 的性能不会受到应用该属性的元素数量影响。性能压力的来源在于，pretty 算法需要评估的文本行数越多，计算就越复杂。在基于 WebKit 的浏览器或应用中，如果你的文本段落有几百甚至上千行，才可能出现性能下降 —— 而这种超长文本在网页上其实很少见。如果你的内容是常规长度的段落，就完全不用担心。你可以放心大胆地使用 text-wrap: pretty，我们会确保用户不会因此感受到卡顿。

我们也在考虑增加一种机制，将非常长的段落拆分成更合适的块，让 WebKit 分块处理每一段内容。这样即使是上千行的文本段落也不会影响性能。这正是 Adobe InDesign 采用的方式：它会优化段落中所有文本的排版，但不是一次性评估无穷多的行。而 WebKit 未来也可能探索其他方式，在保证页面流畅的同时尽可能优化文字排版。

你可以今天就去 Safari Technology Preview 216 中测试 text-wrap: pretty，如果你真的发现性能问题，可以前往 bugs.webkit.org 提交反馈，我们会根据这些建议继续完善该功能，准备在正式版 Safari 中上线。

什么时候用 pretty，什么时候用 balance？

很明显，text-wrap: pretty 是为了让正文排版更加美观。但它的用途仅限于此吗？那 text-wrap: balance 又适合在哪些场景使用呢？

有人可能会给你一个过于简单的答案，比如 “pretty 用在段落里，balance 用在标题里” —— 但这可能并不是一个好建议。接下来我们将深入了解 balance 与 pretty 的区别，并探讨在标题、图片说明、引言或其他短文本中该如何选择。

text-wrap: balance

简单来说，text-wrap: balance 规则会让浏览器在合适的位置换行，使每一行的长度尽量保持一致。你可以把它想象成把一张纸对折、三折、四折…… 每一段都尽可能等长。

【第3437期】CSS ::target-text 用于文本高亮显示

举个例子，这是一个使用默认 text-wrap: auto 的标题。你可以看到，单词 “enough” 落到了第二行的开头，仅仅是因为它无法与前面的 “with” 同在一行。浏览器是一行一行地排版，彼此之间不做协调。这导致最后一行只有一个词 “itself”。

然后看看使用了 text-wrap: balance 的相似标题。最后一行不再是单个词了，这已经很好了！但更重要的是，最后一行现在和其他两行的长度差不多。第一行变得明显更短，以此实现三行之间的 “平衡” 效果。现在三行几乎一样长。

你还会注意到，这样排版之后，标题的视觉宽度（或者说 “墨水块” 的范围）比其容器的总宽度要窄得多（图中用青色线条标出容器边界）。

一个经过平衡的标题，三行长度基本一致，每行宽度大约是容器宽度的三分之二，右侧留有大量空白。第一行甚至是最短的那一行。

这对设计来说是非常棒的。你可以将 balance 应用于标题、图片说明、引导语等短文本，它会让每行文字的长度接近，形成一种更整齐的视觉效果。而且，排版完成后，文本往往不会填满整个容器，会稍微窄一些。

不过，有时这并不是你想要的效果。比如你希望标题下方对齐一张图片，希望文字宽度与图片一致。在这个例子中，第一行明显短于其他行，这种 “平衡” 可能反而破坏了整体感。也许你只是想避免最后一行太短而已。

这时你可以考虑在标题中使用 text-wrap: pretty。它可以避免最后一行过短的同时，保持文字在水平方向填满容器。

一个类似的标题，最后一行有三个词。第一行完全铺满容器，第二行略短，这样可以让多余的词填到最后一行中。

你可以在 Safari Technology Preview 126+ 和 Chrome/Edge 130+ 中自己尝试这些例子，深入了解 text-wrap 对长标题、中等标题和短标题的不同效果。可以拖动文本框角落看看不同宽度下的表现。

【第2232期】深入理解React Router：Context、Hooks、Refs、Memo特性讲解

那么 text-wrap: balance 的性能如何？

CSS 规范并没有硬性规定性能限制，这取决于浏览器引擎本身如何实现，以确保不会影响用户体验。每个浏览器可以根据自身情况做出不同的选择。

例如，Chromium 的实现中最多只平衡四行文本，以保证 Chrome、Edge 和其他基于 Chromium 的浏览器依然保持快速。WebKit 则没有限制行数，所有行都会被统一平衡。

所以说，“pretty 用于正文、balance 用于标题” 是不是太过简单了？

我认为一个更好的理解方式如下：

• pretty 可以应用在页面上的任何文字 —— 正文、标题、图片说明、引导语等等。你可以观察它的效果，如果觉得满意就继续用。如果你有非常长的段落（或者说没有段落分隔的超长文本，达到几百甚至上千行），那就需要先测试性能。同时，如果你对文本设置了动画，文字在动画中不断重新换行，也建议先做性能测试。

• balance 适用于你想要每一行长度都差不多的地方，尤其是标题、说明文字、引导语等短文本。同时你也得接受，排好版后这段文字可能会比容器宽度小很多。不要把它用在长段落上，那不太合适。

• auto 是默认值，目前仍是按照一行一行来排的，就像网页从 1991 年以来的排版方式一样（也被称为 “贪婪算法” 或 “首适算法”）。

• stable 则适用于可编辑的文本或其他需要 “稳定换行” 的场景（见下文）。

不相信 text-wrap: balance 不适合长段落？那就试试看吧。

你可以在同一个演示中为段落应用 text-wrap: balance。你会看到每个段落的宽度都不一样。这种效果通常没有实际用途。

每段文字的整体宽度都被调整，以保证每一行的长度差不多，但它完全不考虑段落和容器宽度的关系。结果就是，每段文字的宽度都不一样，看起来非常怪异。除非你就是想要这种效果，否则建议选用其他方式。

其他的 text-wrap 值都干什么用的？

text-wrap: avoid-short-last-lines

这是 CSS Text Module Level 4 中最新加入的属性，目前还没有任何浏览器实现。它的目标是仅仅避免段落最后一行太短，而不会像 pretty 那样进行更全面的优化。

text-wrap: auto

默认值。也就是网页自 1991 年以来的排版方式。每一行都是独立处理，不考虑上下行。这种方式也叫做 “首适” 或 “贪婪算法”。

不过，这在未来可能会改变！或许哪天浏览器会决定默认应用某种多行排版算法，让所有网页内容（包括旧网站、开发者从未使用 text-wrap 的内容）都自动获得更好的排版体验。

text-wrap: stable

如果你试过 text-wrap: stable，可能会觉得 “它什么都没干啊！” 其实它的作用就是保持现状：采用原始的 “首适算法”，每一行尽可能填满，有需要才换行。

这在某些场景下特别合适，比如：

• 用户正在编辑内容。你不希望用户输入文字时，整段文字跳来跳去，换行逻辑不断变化。
• 你在做动画效果，文字会不断重新换行时，选择 stable 可以使用最快的换行算法，保持流畅。
• 你希望即使将来 auto 默认行为变了，你的内容仍然保持原样排版，那就明确指定使用 stable。

目前大多数浏览器都已经很好地支持 stable。

text-wrap-mode 和 text-wrap-style

其实，text-wrap 是两个更具体属性的简写形式。其中：

• text-wrap-style
  用于选择具体使用哪种换行算法；
• text-wrap-mode
  则用来控制是否启用换行。

 text-wrap-style: auto | stable | balance | pretty | avoid-short-last-lines
 text-wrap-mode: wrap | nowrap

通过同时拥有 text-wrap-mode 和 text-wrap-style 这两个属性，你可以灵活地单独控制换行方式和是否换行，这两项设置可以分别生效、独立级联。

这意味着你也可以仅用 text-wrap 简写来关闭换行，比如：

 text-wrap: nowrap;

或者重新启用换行：

 text-wrap: wrap;

你可以在演示中亲自测试它们的效果，看看具体表现如何。

对 text-wrap-mode 和 text-wrap-style 这两个长属性的支持（以及 nowrap 和 wrap 这两个值）在 2024 年 10 月 正式进入 “Baseline Newly Available”（即所有主流浏览器均已支持）状态，当时 Chromium 在 Chrome/Edge 130 中加入了对它们的支持。

为了兼容老版本浏览器，你仍然可以使用旧的 white-space: nowrap | normal 作为后备方案。不过如果你这样做了，请注意同时检查你的空白折叠行为（因为 white-space 也会影响空格和换行的处理方式）。

你怎么看？

不妨现在就试试在 Safari Technology Preview 216 中使用 text-wrap: pretty，我们非常期待听到你的使用体验！

关于本文
译者：@飘飘
作者：@Jen Simmons
原文：https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。