word-wrap、word-break、white-space区别
我们先来看看在w3c中这三个属性分别是怎么解释的。
white-space:规定如何处理元素中的空白。
word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。
word-break:规定非中日韩文本的换行规则。
貌似后两个跟前面两个没什么联系，其实还是有一些的，我们先来看看后面两个，废话不多说，先上实例：
来看看先进的w3c浏览器的效果:
再来看看落后的ie6:
在英文单词的处理上，只要后面的单词不能够放在后面，默认就会另起一行，但是另起一行还是不够怎么办？默认是不会换行的，w3c浏览器会直接写出去，而落后的ie6会撑开父容器，我们讨论的全是英文单词的情况，中文的情况大家可以看成每个中文都是一个单词，所以默认就会换行的。
怎么样解决上面的问题呢，我们来试下word-wrap,这个属性只有normal和break-word两个值，normal就是默认值就不说了，来看看break-word:
ie6和w3c都变成这样了:
也就是说允许把单词截断了，但是问题来了，既然允许把单词截断，那为何不把第一行的空白部分也占领了然后再截断？那这个问题就不是word-wrap说了算了，它这样其实是有好处的，只要后面不够就另起一行，我们来看看好处是什么：
这下后面单词没有刚刚那么长了，这个时候word-wrap没起作用，因为没有单词需要截断。效果如下:
但是矛盾来了，如果说要占领上面的空白，明显两种情况都会被截断，但是第一种情况明显是占领空白更好，而第二种最好不好占领空白，因为第一种情况那个单词实在是太长了，不管在哪里都必须被截断，而第二种可以一行装下，那么能不截断就不截断吧。但是计算机可没有那么智能，现在有两种情况:
1.截不截断单词视情况而定，不管单词有多长都另起一行。
2.截断单词，占领空白。
第一种情况就是用word-wrap:break-word控制
第二种情况就是word-break控制了，我们先来看看word-break有几个值:
normal这个不多说，就是默认情况；
break-all:这个就是我刚刚说的第二种情况，直接上例子:
大家看上面的结果，这个结果占领了空白，并且肯定会截断单词的。对非常长的单词来说反正都会截断，还不如占领空白，但是对稍微短的单词来说就有点不划算了，但是没办法，计算机就是这样，要那种情况自己抉择，那你说能不能把两个属性都写起，这样就智能了呢，我试过，不能，默认以word-break的方式处理问题，也就是word-break的属性比word-wrap更强。
再来看看word-break的最后一个属性:keep-all,解释是只能在半角空格或连字符处换行
听上去有点懵，不急，我们先上例子:
大家应该搞懂是什么例子了撒，就是遇到空白才换行，不截断单词的，其实就是跟什么都不设置也就是最最开始的情况是一样的。
现在再来看看white-space,我们一个一个的来。
1.pre:这种情况类似于加个<pre>标签，里面的所有空白和换行被保留。说这个之前，我们先看看浏览器默认是什么情况：
在代码中我加了几个空格，但是只显示一个空格，不管加回车还是空格都没用。但是加上pre
不管是回车空格还是制表符，都统统给你显示出来。
2.nowrap：不许换行，说好的截断单词呢，不管是word-wrap还是word-break统统没用，必须在同一行显示，这个就不举例了哈，不管你写什么，都是在一行中显示，空格和回车和制表符都没用，只显示一个空格。
3.pre-wrap:这个属性对ie6-ie8没啥用，在w3c浏览器中，会保留空格，直到下一行，但是到了下一行就没用了。举个例子：
这里明显空格已经超过第二行了，但是到第二行就没用了。
3.pre-line:合并空白符，保留换行符。这个浏览器支持上跟pre-wrap一样。解释很清楚，就不举例了。
基本上就是以上的情况了，今天重点是讲解三个属性
white-space:nowrap word-break:break-all word-wrap:break-word
这三个属性的强度是越来越弱，并且功能上也有差异，童鞋们，搞清楚了吗？
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
