探讨一： word-spacing & letter-spacing的区别

探讨二： word-spacing & white-space 的区别

---

版权声明：本文为 JohnnyL-98 原创文章，非商用*转载-保持署名-注明出处，谢谢。

探讨一： word-spacing & letter-spacing的区别 （对英文）

从单词字面意思大概就可以看出来，一个是对 单词的空间调整，另一个是字母

所以这个栗子，我把一长串字母，空格分隔开。模拟是四个单词，用word-spacing起做用了

这个栗子是一长串单词没有间隙，默认为是一个单词，所以word-s不起作用，但是letter-spacing调整了每个字母之间的距离

To sum up:
(1) word-spacing 就是对整个 单词 进行间隔的控制

(2) letter-spacing是对每个 字母 之间的间距起作用

探讨一（2）： word-spacing & letter-spacing的区别 （对中文）

接下来是对于中文来说，第一行，我把中文用空格分割成三组，同样的，word-spacing起作用了

而第三行，由于没有间隙，默认为这是一个“词组”所以word-s根本不起作用

第二行的还是letter-spacing，它不管你有没有间距，只管你每个字母（文字）之间的距离

To sum up:
对中文来说，跟英文情况类似，分开来讲是为了更好的分辨
（1）第一行和第三行，都使用了 word-spacing，但是为什么第三行不起作用？ 区别在html里面，第三行默认这是一个单词，而第一行我断句了

    <p>我今天想给大  海你会接受对方   汉拿山读法姬娜</p>

    <p>我今天想给大海你会接受对方汉拿山读法姬娜</p>

（2）letter-spacing还是我行我素，不管是对于中文还是英文，都可以随意对每个字之间间距动手脚

探讨二： word-spacing & white-space的区别

**先总结一句：**这两个看上去都有一个space，有点相似，但是用途差的远了。首先明确word-spacing是控制单词与单词之间的距离，可以用px rem数据来作为值。（例如： word-spacing: 10px /20rem 都是OK的）。 但是white-space是不能用数据的，前面的10px/20rem无效，而它有以下这几个值。

white-space——一个和空白格纠缠不清的男人

• nowrap：不换行，除非遇到br> ， N个空格会被压缩为一个。

• pre：保留所有空白。其行为方式类似 HTML 中的 pre>标签。

• pre-wrap：保留所有空白，但是正常地进行换行 （chrome，FF，IE8+，Opera），在IE6和IE7下等同于normal

• normal： 默认。空白会被浏览器忽略。

• pre-line：合并空白符序列（合并成一个），但是保留换行符（chrome，FF，IE8+，Opera），在IE6和IE7下面等同于normal

我把这几个属性分成三类：
（1）nowrap——不还行
（2）pre 、pre-wrap 可以说非常相似的功能了，但是唯一的区别就是后者允许换行
（3）normal、pre-line 这两位大哥会把空格无视！非常可恶，记住这两个就行

下面是三行一模一样的html代码，我们加上white-space的属性看一下效果

    <p>我今天想给大         海你会接受对方             汉拿山读法姬娜</p>

    <p>我今天想给大         海你会接受对方             汉拿山读法姬娜</p>

    <p>我今天想给大         海你会接受对方             汉拿山读法姬娜</p>

To sum up:
（1）第一行直接无视了空格，这就是 normal / pre-line的特性，把空格吞了。

（2）第二行的pre，很友好的保留了空格，但是不支持换行

（3）第三行的pre-wrap，white-space家族良心，保留空格+支持换行