选择启用优化型文本换行功能,快速实现美妆效果。
从 Chrome 117 开始,您可以使用新的文本换行功能 - CSS 文本级别 4 中的 text-wrap: pretty
。
p {
text-wrap: pretty;
}
排版孤立词和孤立词是指段落或文本块末尾独立的单个字词。孤子是指单独显示在文本块顶部的字词,而孤立字符则位于文本块末尾。它们会妨碍我们的眼睛浏览文字,导致内容难以阅读。一些设计人员不惜一切代价来避免这种行为,并且会尽一切努力防止它们。
从 Chrome 117 开始,可以使用一行 CSS 来避免孤立:text-wrap: pretty
。
该功能不仅仅是确保段落不以单个字词结尾,还会在段落末尾出现连续的连字符行时调整连字符,或调整前几行以腾出空间。还可针对文本两端进行适当调整。text-wrap: pretty
通常适用于更好的换行和文本换行,目前侧重于孤立元素。text-wrap: pretty
日后可能会提供更多改进。
![一个包含孤立段落和一个没有孤立段落的段落的对比图,其中每个段落都带有一个“不良”或“良好”标记。](https://developer.chrome.google.cn/static/blog/css-text-wrap-pretty/image/a-comparison-a-paragraph-8806ede4d3829.png?authuser=6&hl=uk)
此外,还有 text-wrap: balance
,它不会阻止孤立文本,但可以确保文本换行的方式产生和谐的文本块。我个人使用 balance
作为标题,使用 pretty
作为段落。
如需详细了解用于确定最佳行数的算法或性能注意事项,请点击此处的链接,查看工程师在 Koji Ishii 这一功能背后编写的设计文档。
如果您有其他换行方面的改进或建议,欢迎随时告诉我们!请在 Chromium 错误跟踪工具中提交问题,并附上详情、良好和不恰当的换行符示例,我们会尽快回复您。