CSS换行中，white-space、word-wrap和word-break区别是什么？

在平时工作中，经常碰到需要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时一致