单词间距
word-spacing 属性用来增加或减少单词之间的距离, 默认值为 0 该属性接受一个正的长度值或负的长度值; 设置一个正的长度值时, 单词之间的间隔会增加; 设置一个负的长度值时, 单词之间的间隔会减少, 让单词挤得更紧, 甚至出现重叠
因为该属性把由空白符包围的一个字符串看作一个单词, 而汉字之间没有空格, 所以该属性对中文无效但是, 如果在汉字中人为添加空格, 则会把空格前后的汉字按单词处理, 该属性会生效
在上一节字符间距的例子中, 整个古诗被设置为在容器中居中显示细心的读者可能已经发现, h1 标题和 h2 标题的中线, 并没有完全对齐
没有对齐的原因, 跟我们的实现方式有关, 因为使用 letter-spacing 属性让标题稀疏明朗, 而 letter-spacing 属性则是通过在每个字符的后面插入指定的空间, 来调整字符间距的所以, h1 标题的最后一个字符思的后面被插入了一个 10px 的空间, 而 h2 标题并未插入任何内容, 其结果就导致 h1 标题和 h2 标题的中线不能完全对齐
要解决这个问题, 可以人为在 h1 标题的汉字之间插入一个空格, 再通过 word-spacing 属性来调整单词间距, 让 h1 标题完美居中如:
<h1> 静 夜 思 </h1>
在 h1 标题的汉字之间插入空格后, 运行结果如图 3-19 所示:
图 3-19 word-spacing 属性效果
从上图可以看出, 经过调整后, h1 标题和 h2 标题的中线已经完全对齐这个问题, 本身是一个细小的问题, 常常被设计师所忽视
然而, 在一个严谨的设计师眼里, 往往没有小问题, 所有问题都是大问题并且, 对于任何问题, 都会刨根问底, 找到问题背后的根源因为只有这样, 才能彻底解决问题
来源: https://www.2cto.com/kf/201802/721472.html