简单理解 word-wrap、word-break 和 white-space 的区别

不设置word-warp和word-break的时候，一行单词，超过了容器的宽度是，会将最后一个单词下移一行进行显示，如果下移的那个单词长度还是超过了容器宽度，则会溢出

word-wrap

设置word-wrap: break-word时，先把长单词移动到下一行，然后如果还是超出容器宽度，则进行单词内的断句换行

后面的单词同上述规则

word-break

当上述情况，长单词移动到下一行的时候，第一行会有一定空余的空间，较为浪费资源。
于是通过设置word-break: break-all，长单词不移动到下一行，直接在当前行进行断句换行

white-space

作用于空格和回车，用于控制空格是否合并、回车是否可折行、句子太长是否在空格处折行

常用取值不同的作用：

• normal: 默认。空白会被浏览器忽略。
• pre: 空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。
• nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
• pre-wrap: 保留空白符序列，但是正常地进行换行。
• pre-line: 合并空白符序列，但是保留换行符。
• inherit: 规定应该从父元素继承 white-space 属性的值。

参考文章

• 你真的了解word-wrap和word-break的区别吗？
• white-space、word-wrap和word-break区别