主要观点:
- Safari Technology Preview 中支持
text-wrap: pretty
,能提升网页排版水平,WebKit 版本的pretty
可评估整段文本以改善排版。 - 传统排版有避免短尾行、不良锯齿等原则,而网页排版曾仅逐行布局,存在诸多问题,如今
text-wrap: pretty
带来改变。 text-wrap: balance
可使每行长度相近,适用于标题等较短文本,与text-wrap: pretty
用途不同。- 各浏览器对
text-wrap: pretty
的实现有所差异,如 Chrome 仅调整段落最后四行,WebKit 则处理所有行,且要考虑性能影响。 text-wrap
属性是text-wrap-mode
和text-wrap-style
的简写,可独立控制换行与否及换行算法。
关键信息:
text-wrap: pretty
能防止短尾行、改善锯齿、减少连字符使用,在 Safari Technology Preview 216 中效果显著,可通过演示查看。text-wrap: balance
使每行长度相近,适用于标题等较短文本,不同浏览器对其性能限制不同。text-wrap: avoid-short-last-lines
专注避免短尾行,尚未在浏览器中实现。text-wrap: auto
是默认值,目前逐行布局,未来可能改变。text-wrap: stable
用于可编辑文本或动画文本,保持原始换行算法。text-wrap-mode
和text-wrap-style
可独立控制换行相关设置,text-wrap-mode
控制换行与否,text-wrap-style
选择换行算法,2024 年 10 月在 Chromium 中支持。
重要细节:
- Safari Technology Preview 216 中
text-wrap: pretty
对所有行生效,性能方面需考虑内容长度,若担心可提交 WebKit 错误报告。 - 不同浏览器对
text-wrap
各值的实现和性能限制不同,如 Chromium 限制text-wrap: balance
处理的行数为四行。 - 可通过演示尝试不同
text-wrap
值的效果,如在codepen中进行操作。 - 若对
text-wrap: pretty
有反馈,可在 Bluesky 或 Mastodon 上联系 Jen Simmons 或提交 WebKit 错误报告。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。