CSS 文本换行：美观

选择启用经过优化的文本换行功能，以美观为先，速度为辅。

Adam Argyle

从 Chrome 117 开始，您可以使用新的文本换行功能（CSS Text Level 4 中的 text-wrap: pretty）。

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

排版孤行和孤字是指段落或文本块末尾单独显示的单个字词。孤行是指文本块顶部单独显示的字词，孤行头是指文本块末尾单独显示的字词。它们会干扰我们的眼睛浏览文本的方式，使内容更难以阅读。有些设计师会不惜一切代价避免出现这些问题，并会想方设法加以防范。

图片来源：Google Fonts - 孤行和孤行头

从 Chrome 117 开始，使用以下一行 CSS 即可避免孤立网页：text-wrap: pretty。

注意：text-wrap: pretty 不同于 CSS 的 orphans 属性，后者在使用 CSS 多列布局时相关。此外，pretty 仅处理孤行，而不会处理孤尾。

该功能不仅仅是确保段落不要以单个字词结尾，它还会在段落末尾出现连续的带连字符的行时调整连字符，或调整前面的行以腾出空间。还会针对文本对齐情况进行适当的调整。text-wrap: pretty 旨在全面改进换行和文本断行，目前侧重于孤行。日后，text-wrap: pretty 可能会提供更多改进。

图片来源：为何应从正文中移除孤行。

还有 text-wrap: balance，它无法防止孤行，但可以确保文本以一种能形成和谐文本块的方式换行。我个人会将 balance 用于标题，将 pretty 用于段落。

如果您有意详细了解用于确定最佳行数的算法或性能注意事项，请点击此处的链接，此链接指向由该工程师制作的设计文档（位于该功能背后）。

如果您有其他换行改进或建议，我们非常欢迎！您可在 Chromium bug 跟踪器中提交问题并提供详细信息以及正常换行和错误换行的示例，我们会与您联系。