Page 144 - css揭秘

20 连字符断行

难题

设计师迷恋文本的两端对齐效果。看一眼杂志和书籍中的精美排版，
就会发现这种效果无处不在。不过在网页中，两端对齐却极少使用，而且
越是有经验的设计师就越少使用。从 CSS 1 开始就已经有 text-align:
justify; 了，为什么还会形成这个局面呢？

只要看一眼图 5-1，其中的原因就会立刻浮出水面。在对文本进行两端
对齐处理时，需要调整单词的间距，此时会出现“单词孤岛”现象。这个结
果不仅看起来很糟糕，而且损伤了可读性。在打印媒介中，两端对齐总是与
连字符断行相辅相成的。因为连字符允许单词在音节分界处断开并折行，所
以在处理对齐时所需要调整的间距就少得多了，文本看起来也自然很多。
以前，有一些在网页上实现连字符断行的方法，但这类方法完全是“伤
敌八百，自损一千”。常见的方法包括服务器端预处理、JavaScript 后期处 图 5-1
理、用在线生成器单独处理，甚至还有开发者耐着性子在单词中纯手工插入 CSS 两端对齐的默认效果
软连字符（­），以便浏览器可以在正确的地方断开单词。一般来说，这
种额外成本很不划算，因此设计师往往会改用其他的文本对齐方式。

解决方案

CSS 文本（第三版）引入了一个新的属性 hyphens。它接受三个值：

小 花 絮 文本折行的工作原理是怎样的？

与计算机科学中的很多事情类似，文本折行听起来简单易行，但实际上并非如此。这方面的算法有很多，
最流行的方案主要是贪婪算法和 Knuth-Plass 算法。贪婪算法的工作原理是每次分析一行，把尽可能多的
单词（当连字符可用时则以音节为单位）填充进该行；当遇到第一个装不下的单词或音节时，就移至下一
行继续处理。

Knuth-Plass 算法（得名于开发它的工程师）的工作方式就要高级很多。它会把整段文本纳入考虑的范
畴，从而产生出美学上更令人愉悦的结果，但其计算性能要明显差一些。

绝大多数桌面文字处理程序采用 Knuth-Plass 算法。不过出于性能考虑，浏览器目前采用的是贪婪算法，
因此它们的两端对齐效果往往不尽如人意。

113
20 连字符断行
20 连字符断行 113

඀ࠡ JOEC