在平时工作中，经常碰到需要css设置换行，每次碰到都是一通百度，因为white-space、word-break和word-wrap这三个根本记不住，今天对这三个进行总结。
本文根据 https://baijiahao.baidu.com/s?id=1578623236521030997&wfr=spider&for=pc 这篇文章总结
结论
white-space：用来设置如何处理空白字符，即处理要不要换行。
word-break：断词规则，设置的是如果要换行的话，在什么位置换行。
white-sapce
首先，white-space是用来处理文本内的空白符、换行符以及是否允许折行。用法如下：
| 值 | 描述 | 空白符 | 换行符 | 过长是否折行 |
|---|---|---|---|---|
| normal | 合并连续的空白符、换行符为一个空白符，折行 | 连续多个空白符合并成一个 | 换行符被当作空白符处理，一同合并 | 折行 |
| pre | 完全保留文本中的格式，不折行 | 所有空白符保留 | 所有换行符保留 | 不折行 |
| nowrap | 合并连续的空白符、换行符为一个空白符，不折行 | 连续多个空白符合并成一个 | 换行符被当作空白符处理，一同合并 | 不折行 |
| pre-wrap | 保留所有空白符、换行符，折行 | 所有空白符保留 | 所有换行符保留 | 折行 |
| pre-line | 空白符合并，换行符保留，折行 | 连续多个空白符合并成一个 | 所有换行符保留 | 折行 |
注意，white-space对中日韩统一表意文字（CJK Unified Ideographs）有效，也就是说，white-space可以用来设置中文的换行情况。英文的换行，由word-wrap和word-break设置。
word-wrap
word-wrap用来标明是否允许浏览器在单词内进行断句，而word-break用来标明怎样进行单词内断句。
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器默认）。也就是说，单词处换行，如果一个单词超长，那么它会超出容器。 |
| break-word | 在长单词或URL地址内部换行。单词超长的，首先尝试将它挪到下一行，仍旧超长，则在下一行截断单词换行， |
word-break
word-wrap用来标明是否允许浏览器在单词内进行断句，而word-break用来标明怎样进行单词内断句。
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则，也就是说只在单词、连字符处换行，不截断。在非CJK文本，即英文下，表现与keep-all一致，也与word-wrap设置为normal时一致 |
| break-all | 允许在单词内换行，与word-wrap的break-word相比，它不会尝试将超长单词挪到下一行，而是直接单词内截断换行 |
| keep-all | 只能在半角空格或连字符处换行，在非CJK文本，即英文下，表现与normal一致，也与word-wrap设置为normal时一致 |
