良好的中文排版要求舒适的折行,在单词中间发生折行比较容易打断阅读的节奏:

为什么会变成这样呢

在标题中出现这种尴尬的折行则更为难看,为了避免中文单词被折行,可以使用 word-break: keep-all

为什么会变成这样呢

再加上零宽空格,手工加入中文单词的分割点,

为什么会变成​这样呢

零宽空格(ZWSP)Unicode 码 U+200B,HTML 代码 ​,即没有宽度的空格。零宽空格受到 white-space 样式的控制,显示的时候则没有空格。先把 word-break 设置成 keep-all 阻止浏览器分割 CJK 字符序列,之后在序列中插入零宽空格,就会在零宽空格的位置发生折行了。

可是,Safari 在处理文档的时候过滤掉了零宽空格(斜眼)只能用 <wbr> 表示零宽空格(全称是 word break)

为什么会变成这样呢

在写文章的时候手工在正文中插入 <wbr> 效率毕竟太低,因此这只适用于标题的折行控制,如果 word-break 能够按照中文分词规则进行分词就很好了。


下面是另一个在网页中折行的尴尬例子:

为什么你会这么熟练啊!

在行尾出现标点时,浏览器的默认行为会把上一行最后一个「词」拿出来和标点一起放到下一行(中文在 Chrome 中被认为单字成词)保证内容不超出边框。但这样一来就必须将行尾符号前的单词拆开,且新行的行首会变成出现一个字之后会立刻跟一个标点的状态,非常难看。

标点悬挂(Hanging punctuation)也叫 exdentation,意思是把句首或句尾的标点挂到外面去。使用 hanging-punctuation 可以阻止浏览器默认的换行行为,把句末的标点放到边框外面。

为什么你会这么熟练啊

遗憾的是,目前还没有任何浏览器支持 hanging-punctuation 属性,上面展示的是一个模拟的结果。Medium 使用 JavaScript 实现了标点悬挂的排版,去年 WDCC 上豆瓣读书的工程师也分享过他们的解决办法——把文本全部放进 span 标签,用 JavaScript 计算排版。如果对排版的要求不高,可以使用 <wbr> 控制「词」的边界,虽然不如用符号悬挂看着舒服但也能起到一些微小的作用。