揭秘CSS(第 1 版)
3.2.7 单词间距
阅读(

概述

CSS选择器

字体和文本

字体

文本

字符间距

垂直对齐

行高

水平对齐

水平对齐

文本缩进

单词间距

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 标题的中线已经完全对齐。这个问题,本身是一个细小的问题,常常被设计师所忽视。

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验