探讨一: 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家族良心,保留空格+支持换行