css中换行的特殊用法

两个属性都同样是让文字换行，但存在着细微的区别，大部分时候刚接触到这两个属性时会无法区别两个的区别

下面讲一下两者的区别：

word-wrap:break-word; 作用是强制让文字换行。一般情况下当父级宽度不够的时候，不管英文单词自动换行是当一整个单词不够放时，整个单词一起换行到下一行，

看似很合理的写法，但是在有些情况下会出现不可预期的情况。就是当一个英文单词的长度超过了父级容器长度是，英文单词还是会显示一整个单词而导致超出容器范围。

还有的情况是，当遇到一个单词很长时，次单词自动换行，也会使上一行空出很多空间浪费了。

在这种情况下，IE创造出一种新的属性，word-break:break-all; 它强制文字换行无论一句话到达父级容器宽度的时候是不是一整个单词，都会强制换行，使单词断句，

如果碰上一个单词超出父级容器宽度，会使单词断开并换行。

兼容性：

word-break:break-all; 只不兼容opera，其他浏览器都兼容

word-wrap:break-word;兼容所有浏览器

两种写法的各有作用，应视情况做出选择！

white-space主要用来设置CJK文本是否不折行，实际中主要用white-space:nowrap来让文本不折行。

word-wrap主要用来设置非CJK文本是否折行（因为CJK文本会自动折行），如果空间足够，不会对单词内部进行截断

word-break同样主要用来设置非CJK文本是否折行，但是会对单词内部进行截断

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break 属性用来标明怎么样进行单词内的断句。

用法： word-wrap: normal|break-word;

word-break:normal|break-all|keep-all;

显然两个样式都可以解决换行的问题，那么它们直接的区别呢？

当一段文字有一个长长长的英文单词的情况下使用这两个属性的区别：

word-wrap:

word-break：

区别就是长单词在word-wrap作用下换到下一行，后面可以正常还行，word-break的作用下利用了上一行没有用完的空间。

感悟：有些不起眼的小属性平常可能觉得无关紧要，可是在有些恰恰好的情况下确可以充当救世主的角色。