例子前提：
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都可以让超过容器宽度的单词被拆分开来。