CSS 文本换行:美观

选择启用优化型文本换行功能,快速实现美妆效果。

Adam Argyle
Adam Argyle

从 Chrome 117 开始,您可以使用新的文本换行功能 - CSS 文本级别 4 中的 text-wrap: pretty

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

排版孤立词和孤立词是指段落或文本块末尾独立的单个字词。孤子是指单独显示在文本块顶部的字词,而孤立字符则位于文本块末尾。它们会妨碍我们的眼睛浏览文字,导致内容难以阅读。一些设计人员不惜一切代价来避免这种行为,并且会尽一切努力防止它们。

相较于没有孤立或孤儿的同一段落,显示出的段落开头为孤立,结尾处为孤立段落。
图片来源于 Google Fonts - Widows & Orphans

从 Chrome 117 开始,可以使用一行 CSS 来避免孤立:text-wrap: pretty

该功能不仅仅是确保段落不以单个字词结尾,还会在段落末尾出现连续的连字符行时调整连字符,或调整前几行以腾出空间。还可针对文本两端进行适当调整。text-wrap: pretty 通常适用于更好的换行和文本换行,目前侧重于孤立元素。text-wrap: pretty 日后可能会提供更多改进。

一个包含孤立段落和一个没有孤立段落的段落的对比图,其中每个段落都带有一个“不良”或“良好”标记。
图片来源于为什么要从正文中移除孤立词。

此外,还有 text-wrap: balance,它不会阻止孤立文本,但可以确保文本换行的方式产生和谐的文本块。我个人使用 balance 作为标题,使用 pretty 作为段落。

如需详细了解用于确定最佳行数的算法或性能注意事项,请点击此处的链接,查看工程师在 Koji Ishii 这一功能背后编写的设计文档。

如果您有其他换行方面的改进或建议,欢迎随时告诉我们!请在 Chromium 错误跟踪工具中提交问题,并附上详情、良好和不恰当的换行符示例,我们会尽快回复您。