white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是用了n次都经常搞混，必须系统整理一下，今天我们就把这三个属性彻底搞清楚！测试代码
(文末有本文中所有例子的代码)
下面是本文中用于测试三个样式属性展现情况的html代码：<div id="box">
Hi ,
This is a incomprehensibilities long word.
</br>
你好 ，
这 是一个不可思议的长单词
</div>
现在只给了它一个宽度和边框，没有其它任何样式，下面是它目前的展现情况：
可以看到，nbsp;和
可以正常发挥作用，而连续的空格会被缩减成一个（比如This和is之间的三个空格变成了一个），换行符也全都无效。句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界。
接下来我们看下， 给它上面三个css属性赋值后会出现什么变化。white-space
正如它的名字，这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。因为默认是normal，所以我们主要研究下其它四种值时的展现情况。
（为了方便比较，下文所有图，左侧为normal即初始情况，右侧为赋上相应值时的情况）
先看下white-space:nowrap时的情况：
不仅空格被合并，换行符无效，，连原本的自动换行都没了！只有
