彻底搞懂word-break、word-wrap、white-space
white-space 这个属性是用来控制空白字符的显示的
word-break
这个属性是控制单词如何被拆分换行的。它有三个值：normal | break-all | keep-all。
word-break: keep-all 所有“单词”一律不拆分换行
注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行。
word-break: break-all 所有单词碰到边界一律拆分换行
不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用 word-break: break-all 时要慎重呀。
word-wrap（overflow-wrap）
这个属性也是控制单词如何被拆分换行的，实际上是作为 word-break 的互补，它只有两个值：normal | break-word
只有当一个单词一整行都显示不下时，才会拆分换行该单词
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。word-wrap 现在被当作 overflow-wrap 的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
所以我觉得 overflow-wrap 更好理解好记一些，overflow，只有长到溢出的单词才会被强制拆分换行！
（其实前面的 word-break 属性除了列出的那三个值外，也有个 break-word 值，效果跟这里的 word-wrap: break-word 一样，然而只有Chrome、Safari等部分浏览器支持）
总结
最后总结一下三个属性
white-space：控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal
|nowrap|pre|pre-wrap|pre-lineword-break：控制单词如何被拆分换行。它有三个值：normal
|break-all|keep-allword-wrap（overflow-wrap）：控制长度超过一行的单词是否被拆分换行。是word-break的补充，它有两个值：normal
|break-word相关地址：https://blog.csdn.net/yuqing1008/article/details/103523243
https://blog.csdn.net/jdbdh/article/details/83687049