这是我参与「第四届青训营」笔记创作活动的第1天，在上了解和深入css这门课时，老师在讲一些代码示例的时候，用到了单词换行的属性，之前我对于单词换行的属性都是一知半解，因此，正好我可以通过这次机会去深入了解一下css单词换行的属性，填补上知识空缺。
white-space
white-space 属性用于指定元素内的空白怎样处理，元素中需要处理的空白有：空格、回车和制表符。
| 值 | 描述 |
|---|---|
| normal | 所有空格、回车、制表符都合并成一个空格，文本自动换行 |
| nowrap | 所有空格、回车、制表符都合并成一个空格，文本不换行 |
| pre | 所有东西原样输出，文本不换行 |
| pre-wrap | 所有东西原样输出，文本换行 |
| pre-line | 所有空格、制表符合并成一个空格，回车不变，文本换行 |
| inherit | 继承父元素 |
word-wrap（overflow-wrap）
该属性用于控制长度超过一行的单词是否被允许换行，它有两个值：normal | break-word
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
word-break
该属性用于控制单词该如何换行，它有三个值：normal | break-all | keep-all
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
三者的区别
- white-space用于指定元素内的空白应该如何处理，而word-wrap:break-word和word-break:break-all都用于把长单词强行断句;
- word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；
- word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
- word-break:keep-all只会在半角空格或连字符处换行，当这一行放不下的时候会直接溢出。
