word-wrap:break-word 是优先断单词(根据空格判断单词),而 word-break:break-all 完全没有把文字当单词看待,在它眼里,都是一块一块的字符。

这就会造成这么两情况:

  • 假如一个 p 有 100px 宽,而其中有很长一段无空格的英文字符,完全超过 100px 了,此时二者表现相同,都是在边界处将字符截断。
  • 假如一个 p 有 100px 宽,其中有段文字既有中文也有英文,前面是中文,占了 70px,后面一个很长的英文单词有 50px。对于 word-wrap:break-word 会将该单词全部折到下一行输出,而 word-break:break-all 会利用剩下的 30px 输出单词的前半部分,再到下一行输出剩下的 20px。

支持情况

  • word-wrap:break-word 受众多浏览器支持;
  • word-break:break-all 受较少浏览器支持。

相关文章:

  • 2022-02-01
  • 2022-12-23
  • 2021-12-03
  • 2022-03-09
  • 2022-12-23
  • 2022-12-23
  • 2021-11-22
  • 2021-09-14
猜你喜欢
  • 2021-05-05
  • 2022-12-23
  • 2022-01-17
  • 2022-02-02
相关资源
相似解决方案