word-wrap:break-word 与 word-break:break-all 区

前端之家收集整理的这篇文章主要介绍了word-wrap:break-word 与 word-break:break-all 区前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

这就会造成这么两情况:

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

支持情况

  • word-wrap:break-word 受众多浏览器支持
  • word-break:break-all 受较少浏览器支持
原文链接:https://www.f2er.com/css/70649.html

猜你在找的CSS相关文章