white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。我每次用时也会查一查。今天就整理了一下他们的区别。

接下来我们看下， 给它上面三个css属性赋值后会出现什么变化。

white-space 属性

这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。因为默认是normal，所以我们主要研究下其它四种值时的展现情况。

给box一个 white-space:nowrap 样式

文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

给box一个 white-space:pre样式

空白会被浏览器保留。

给box一个 white-space:pre-wrap样式，保留空格和换行符，且可以自动换行。

给box一个 white-space:pre-line;样式，合并空白符序列，但是保留换行符。

word-break

从这个名字可以知道，这个属性是控制单词如何被拆分换行的。它有三个值：normal | break-all | keep-all。

word-break:keep-all；

所有“单词”一律不拆分换行，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行

word-break:break-all；

所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用word-break:break-all时要慎重呀。

这样的效果好像并不太好呀，能不能就把incomprehensibilities拆一下，其它的单词不拆呢？那就需要下面这个属性了：word-wrap（overflow-wrap）；

word-wrap又叫做overflow-wrap

word-wrap:break-word;

最后总结一下三个属性

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