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

Posted 2020-08-20

　　当我们要显示的句子“how are youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”超过了容器的宽度（且容器宽度大于"how are"显示的宽度）时，

　　若我们使用了word-wrap:break-word，则“how are”的位置不变，而“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”会跳到下一行，要是“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”还超出容器的宽度，则此单词会被拆开到下一行显示；

　　若我们使用了word-break:break-all；则会根据容器的宽度显示此句子，直接从长单词“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”的某部位拆开此单词，后面部分显示到下一行。即，长单词“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”会根据容器宽度去让单词断开，断开的前部分会跟“how are”显示在同一行，断开的后部分显示到下一行。

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