首页 > 代码库 > word-wrap:break-word和word-break:break-all的区别

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

  当我们要显示的句子“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都可以让超过容器宽度的单词被拆分开来。

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