white-space、word-wrap和word-break通常用来解决如下问题：
- 强制字符串过长在一行显示；
- 单词太长，希望折成多行显示（避免溢出）；
- 保留空格（敲了10个空格，最终只显示1个）
- 保留回车（敲了10个回车，浏览器完全不显示）
white-space
取值：
normal | nowrap | pre | pre-wrap | pre-line
normal：连续的空白符会被合并，换行符会被当作空白，宽度不够时会折行。
nowrap：同normal，但不会折行。
pre：连续的空白符会被保留，换行符、<br>也会引起换行，但不会折行。
pre-wrap：同pre，但是会折行。
pre-line：同pre-wrap，但是连续的空白符会被合并。
合并的空白宽度由
word-spacing属性设置。
作用：
white-space作用于空格和回车上，用于控制：
- 空格是否合并
- 回车是否解释成折行
- 句子太长是否在有空格处折行
属性解读：
| 空格和制表符 | 换行符newline | 自动换行 | |
|---|---|---|---|
| normal | 合并 | 合并 | 换行 |
| nowrap | 合并 | 合并 | 不换行 |
| pre | 保留 | 保留 | 不换行 |
| pre-wrap | 保留 | 保留 | 换行 |
| pre-line | 合并 | 保留 | 换行 |
white-space：有一堆pre开头的值，pre到底是啥意思？
pre是preserve（保留）的缩写，可以这样理解：
- pre：保留（preserve)所有的空格和回车，且不允许折行。（将折行也看成一种非preserve)
- pre-wrap:保留（preserve)所有的空格和回车，但允许折行（wrap)。
- pre-line:仅仅保留（preserve)回车（line)，会合并空格，且允许换行。
word-wrap
取值
normal | break-word
作用：
word-wrap属性作用于单词上，允许浏览器在单词内进行断句，为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
属性解读：
normal:浏览器默认单词断行。
break-word：会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；
word-break
取值：
normal |break-word | break-all |keep-all
作用：
wordk-break属性作用于单词上，用来标明怎么样进行单词内的断句
属性解读：
-
normal：浏览器预设的单词断行(优先考虑在空白字符处折行)，英文以词断行（不做任何断词），中文则以字断行。如图：
image.png
break-word：与设置word-wrap:break-word的效果相同。break-all：不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。-
keep-all：用词断行,同normal，但 CJK 文本不断行。如图
image.png
