CSS word-spacing 语法
在 CSS 中，word-spacing 属性用于实现文本中的 “单词间距” 。
语法：
word-spacing: 数值;说明：
word-spacing 的取值是一个数值，比如像素值（px）、em、rem 等。
word-spacing 的取值可以是一个正值，也可以是一个负值。当使用负值时，如果值过大，可能会导致单词重叠。
word-spacing 属性会影响单词之间，以及单词与标点符号之间的间距。
注意: word-spacing 定义的是 “单词间距”，它只会作用于英文文本，而不会作用于中文文本。
CSS word-spacing 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 是 |
| 默认值 | normal |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS word-spacing 示例
接下来，我们通过几个简单的例子来讲解一下 CSS word-spacing 属性是如何使用的。
示例 1：word-spacing 增加单词之间的间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-child(1) { word-spacing: 2px; }
p:nth-child(2) { word-spacing: 5px; }
p:nth-child(3) { word-spacing: 8px; }
</style>
</head>
<body>
<p id="p1">Rome wasn't built in a day. 罗马不是一天建成的。</p>
<p id="p2">Rome wasn't built in a day. 罗马不是一天建成的。</p>
<p id="p3">Rome wasn't built in a day. 罗马不是一天建成的。</p>
</body>
</html>页面效果如下图所示。
分析：
当 word-spacing 取值为正值时，会增加单词之间的空隙。然后从页面效果可以看出，word-spacing 只会影响英文单词之间的间距，而不会影响中文。
示例 2：word-spacing 减少单词之间的间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-child(1) { word-spacing: -1px; }
p:nth-child(2) { word-spacing: -2px; }
p:nth-child(3) { word-spacing: -3px; }
</style>
</head>
<body>
<p id="p1">Rome wasn't built in a day. 罗马不是一天建成的。</p>
<p id="p2">Rome wasn't built in a day. 罗马不是一天建成的。</p>
<p id="p3">Rome wasn't built in a day. 罗马不是一天建成的。</p>
</body>
</html>页面效果如下图所示。
分析：
当 word-spacing 取值为负值时，会减少单词之间的空隙。
word-spacing 与 letter-spacing
word-spacing 与 letter-spacing 看着很相似，它们之间的区别如下。
letter-spacing：定义的是 “字间距”，可以作用于英文文本和中文文本。word-spacing：定义的是 “词间距”，只会作用于英文文本。
