css属性区分---------word-break与word-wrap

                                      css属性---------word-break与word-wrap

word-break与word-wrap这连个属性作用都是控制文本的换行，但是很多人却不太清楚这两个属性的区别，往往是将两个方法一起使用：

例如：

word-wrap:break-word;
word-break:break-all;

但其实上述两个属性还是存在一些小区别的，废话不多说，先上代码和效果图示例：
代码：

word-break:break-all;效果图：



代码：

word-wrap:break-word;效果图：



可以很明显的看到区别：

word-wrap 强调的是是否允许单词内断句，而word-break强调的则是怎么样来进行单词内的断句。

我们说了，word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word-break:break-all，就等于使用粗暴方式来断句了。总之一句话，如果您想更节省空间，那就用word-break:break-all就对了！