我的位置: 首页  >   揭秘CSS  >   3.2.7 单词间距

3.2.7 单词间距

编辑:比特教程网    时间:2018-10-12 13:27    


word-spacing属性用来增加或减少单词之间的距离,默认值为0。该属性接受一个正的长度值或负的长度值;设置一个正的长度值时,单词之间的间隔会增加;设置一个负的长度值时,单词之间的间隔会减少,让单词挤得更紧,甚至出现重叠。

因为该属性把由空白符包围的一个字符串看作一个单词,而汉字之间没有空格,所以该属性对中文无效。但是,如果在汉字中人为添加空格,则会把空格前后的汉字按单词处理,该属性会生效。

在上一节字符间距的例子中,整个古诗被设置为在容器中居中显示。细心的读者可能已经发现,h1 标题和 h2 标题的中线,并没有完全对齐。

没有对齐的原因,跟我们的实现方式有关,因为使用 letter-spacing 属性让标题稀疏明朗,而 letter-spacing 属性则是通过在每个字符的后面插入指定的空间,来调整字符间距的。所以,h1 标题的最后一个字符‘思’的后面被插入了一个 10px 的空间,而 h2 标题并未插入任何内容,其结果就导致 h1 标题和 h2 标题的中线不能完全对齐。

要解决这个问题,可以人为在 h1 标题的汉字之间插入一个空格,再通过 word-spacing 属性来调整单词间距,让 h1 标题完美居中。如:

<h1>静 夜 思</h1>

在 h1 标题的汉字之间插入空格后,运行结果如图 3‑19 所示:

word-spacing属性效果

图3-19  word-spacing属性效果

从上图可以看出,经过调整后,h1 标题和 h2 标题的中线已经完全对齐。这个问题,本身是一个细小的问题,常常被设计师所忽视。

然而,在一个严谨的设计师眼里,往往没有小问题,所有问题都是大问题。并且,对于任何问题,都会刨根问底,找到问题背后的根源。因为只有这样,才能彻底解决问题。



上一节:3.2.6 字符间距

下一节:3.2.8 文本转换