彻底搞懂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-line

• word-break：控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all

• word-wrap（overflow-wrap）：控制长度超过一行的单词是否被拆分换行。是word-break的补充，它有两个值：normal | break-word

• 相关地址：https://blog.csdn.net/yuqing1008/article/details/103523243

•                  https://blog.csdn.net/jdbdh/article/details/83687049