word-wrap:break-word和word-break:break-all的区别

例子前提：

　　1：在网页一div中显示句子“how are youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”。

　　2：此div宽度大于“how are”的长度，且小于整个句子的长度。

　　　

情形一：

　　使用word-wrap:break-word。

结果：

　　“how are”的位置不变，而“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”会跳到下一行显示；若“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”超出容器的宽度，则此单词会被拆开到再下一行显示。

情形二：

　　使用word-break:break-all。

结果：

　　会根据容器的宽度断开此句子。即：长单词“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”会根据容器宽度去让单词断开，断开的前部分会跟“how are”显示在同一行，断开的后部分显示到下一行。

由此可见，两者的区别为：

　　使用word-break:break-all，长单词和其前面的内容先根据容器宽度断开，被断开的单词后半部分换行；

　　而使用word-wrap:break-word，长单词先跟前面的内容换行，再根据容器宽度决定是否需要断开。

　　

两者的共同点：　　

　　同样的是word-wrap:break-word和word-break:break-all都可以让超过容器宽度的单词被拆分开来。