CSS秘密花园： 断字_html/css_WEB-ITnose

《 css secrets 》是 @lea verou 最新著作，这本书讲解了有关于css中一些小秘密。是一本csser值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在w3cplus发布一系列相关的读后感，与大家一起分享。

Devv

Devv是一个专为程序员打造的新一代AI搜索引擎

140

查看详情

设计师都喜欢搞文本对齐。在一些令人惊叹的杂志或书籍设计中，文本对齐随处可见。然而，在Web上，对齐却很少使用，甚至是熟练的设计师也很少用。这难道是因为我们从CSS1开始就有了 text-align: justify; ？

如上图所示，原因非常明显！！看看这些为了要对齐，去调整文本间距产生的“空白流”。这不仅让文本看起来不美观，对可读性也有影响。在印刷中，对齐一直是和连字符走在一起的。因为连字符允许单词被分解成音节表示，需要用于调整的空白非常少，这样文本看起来也更自然。

立即学习“前端免费学习笔记（深入）”；

直到最近，Web上出现了用连字符连接文字的方法，不过都是比问题本身更糟糕的解决方案。常用的方法包括在服务器端编写代码，JavaScript，在线生成器，或甚至我们自己花费很多耐心手动为文本添加连字符( ­ )，这样浏览器才知道哪些单词需要断开。通常，这样的开销是不值得的，所以设计师们决定找到一种不同的文本对齐方法来替代。

解决方案

在CSS3中，新属性来啦： hyphens 。它接受三个值： none ， manual 和 auto 。它的初始值是 manual ，以匹配现有的行为：我们可以用软连字符手动断字。很明显， hyphens: none; 将禁用此行为。但是暂不谈前面两个，真正神奇的效果是通过这行非常简单的CSS代码来完成的：

hyphens: auto;

这就是需要的所有东西了。你可以在下图中看到效果。当然，为了让它能生效，你需要通过HTML的 lang 属性声明一种语言，虽然这是你在编写HTML时都必须声明的。

应用 hyphens: auto 的效果

如果你想要对断字有更精细的控制（例如，简短的介绍文字），你可以使用一些软连接符（ ­ ）来帮助浏览器搞定。连字符属性会优先显示它们，接着才查找还有什么需要断开的地方。

TRIVIA自动换行的工作原理

像计算机科学中的很多东西，自动换行听起来非常简单而且直接，但是实际上并不是。要完成它有很多算法，但是最流行的是贪心算法和knuth-Pass算法。贪心算法是通过每次分析一行来实现的，用尽可能多的单词（或音节，如果使用断字的话）来填充，直到遇到第一个不适合单词/音节，它就会移动到下一行。

knuth-Plass算法，根据开发这个算法的工程师命名，要复杂得多。它的工作原理是，会将整个文本考虑在内，并产生更美观的效果，但是计算的过程也相当慢。

大多数桌面端的文本处理应用程序都使用knuth-Plass算法。但是浏览器目前是使用Greedy，因为性能原因，所以它们的对齐结果看起来就不那么美观了。

CSS断字的降级是非常优雅的。如果 hyphens 属性不被支持的话，你得到的就是像下图那样的文本对齐效果。虽然阅读起来并不美观愉快，但是能看到文本也已经是非常棒的了。

FUTURE控制连字符连接

如果你是一个有设计背景的人，你可能会对于断字这个想法不太喜欢，因为没有其它的设置是用来控制如何断开单词的。

但是你可能会很高兴地听到，在将来我们对于断字会有更多更精细的控制， CSS4 中计划有几个相关的属性，其中包括：

• hyphenate-limit-lines
• hyphenate-limit-chars
• hyphenate-limit-zone
• hyphenate-limit-last
• hyphenate-character