主要观点:西方语言的长文本排版有左对齐和两端对齐两种,作者在网页设计中避免使用两端对齐,原因是网页中的自动连字符排版较难处理,容易出现不可预测的结果,但看到 Nathan Knowler 的 Mastodon 帖子后受到启发,重新审视用 CSS 实现两端对齐文本。
关键信息:
- 引用 Matthew Butterick 的观点强调使用两端对齐需开启连字符功能,Jason Santa Maria 称
hyphens: auto
较粗糙。 - Nathan Knowler 分享的
text-wrap: balance; hyphens: auto; hyphenate-limit-chars: 10;
代码可帮助平衡文本避免小词连字符。 - 以 Lewis Carroll 的《爱丽丝梦游仙境》为例,展示用
text-align: justify
、hyphens: auto
、text-wrap: pretty
(仅 Chrome 和 Edge 支持)、hyphenate-limit-chars: 7
实现两端对齐文本的效果,在中大型容器宽度下效果较好,窄宽度时仍有问题,左对齐文本更灵活可预测且更易读,从无障碍角度看左对齐更适合。 - 给出在特定容器宽度下使用
@container
和@supports
实现响应式两端对齐的代码。
重要细节:
- 提到不同浏览器如 Chrome、Safari、Firefox 在连字符处理上的差异。
- 说明了
text-wrap: balance
和text-wrap: pretty
的区别及hyphenate-limit-chars
的取值需根据设计和内容确定。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。