当前位置:Gxlcms > html代码 > CSS秘密花园:断字_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:34人阅读

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

设计师都喜欢搞文本对齐。在一些令人惊叹的杂志或书籍设计中,文本对齐随处可见。然而,在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

人气教程排行