自动换行
当文本超出显示区域宽度时,自动折到下一行的处理。按单词边界还是字符边界换行,取决于语言和设置。
自动换行 (word wrap) 是指文本到达显示区域右边界时,自动折到下一行的处理。文本编辑器、浏览器、邮件客户端、社交媒体的发布界面等所有显示文本的软件都实现了这一功能。如果没有自动换行,长文本会溢出屏幕右侧,必须水平滚动才能阅读。
英文的自动换行相对简单。单词之间的空格是天然的换行位置,在空格处断行就不会把单词从中间截断。但遇到特别长的单词 (如 URL 或德语复合词) 时,就需要在单词中间强制换行。CSS 的 overflow-wrap: break-word 就是用来处理这种情况的。
中文的自动换行有其独特之处。中文没有空格分隔词语,原则上可以在任意字符后换行。但存在标点禁则规则:句号"。"、逗号","不能出现在行首 (行首禁则),左引号"「"、左括号"("不能出现在行末 (行末禁则)。GB/T 15834《标点符号用法》对此有明确规定。CSS 的 line-break 属性可以控制禁则处理的严格程度,有 strict (严格)、normal (标准)、loose (宽松) 三个级别。
CSS 提供了多个与换行相关的属性。word-break 控制是否允许在单词中间换行,设为 break-all 可在任意位置换行。overflow-wrap (旧名 word-wrap) 仅在正常换行位置无法容纳时才拆分单词。hyphens: auto 可以在换行位置自动插入连字符来拆分单词 (需要语言词典支持)。
软连字符 (U+00AD) 是一种可用于控制换行的不可见字符。在长单词中插入软连字符后,只有在该位置需要换行时才会显示连字符,不需要换行时则完全不可见。在字符计数中,是否包含软连字符是一个问题,这也是显示字符数与内部字符数不一致的原因之一。
每行字符数直接影响可读性。英文排版中,每行 45 至 75 个字符 (理想值为 66 个字符) 被认为最易阅读;中文排版中,每行 25 至 40 个字符较为合适。在网页设计中,可以通过 max-width 或 ch 单位来控制行宽,结合自动换行来设计最佳的阅读体验。