2021-07-14 white-space、word-wrap和word-break区别；letter-spacing和word-spacing区别

此3个是在CSS中最常见的文本换行相关属性。
1、white-space：
作用：
作用于空格和回车，用于控制空格是否进行合并，回车是否进行换行，如果句子过长是否在空格处换行。
常用参数：
normal：多个连续的空格会被合并为一个，回车会被忽略，同时句子如果太长，会在空白处折行。
nowrap：强制在同一行显示文本，合并多余的空白，除非遇到br才换行。
运用场景：
主要用于固定宽度的标题，水平方向的文本过长加省略号的操作。
一行超出：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行超出：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
注意：
如用使用了white-space为nowrap,设置其它强行折行的word-break将不生效，需要修改white-space为normal。

2、word-wrap:
作用：
主要用于单词上，控制水平方向上的超长单词是否折行。
常用参数：
normal:单词超长也不可折行，会产生溢出。
break-word:单词超长会折行

3、word-break：
作用：
防止页面中出现连续无意义的长字符打破布局。
常用参数：
normal:如果是中文则到边界处的汉字换行，如果是英文整个词换行。
注意：
如果出现英文字符长度超过边界，则后面的部分将撑开边框，如果边框为固定属性，则后面部分将无法显示。
break-all:强行换行，将截断英文单词。
keep-all:不允许字断开。

4、letter-spacing：
长度单位，设置字符间的间距，对于英文而言单个字母就是一个字符，对于中文而言单个文字就是一个字符。

5、word-spacing：
长度单位，设置单词间的间距，如何区别是不是为一个单词呢，用空格隔开的为一个单词，对于英文而言就是字面意思，对于中文而言，因为中文没有空格的习惯，所以如果没有打空格，这个属性不起作用，打了空格才起作用，会使空格变得更大。