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

word-break:break-all
word-wrap:break-word

相同之处:都是换行
不同:
word-wrap :break-word 以单词换行,可能不对齐,会出现空白
word-break:break-all 所有都换行,是以div宽度进行换行的,可能会影响单词的完整性

如果遇到没有空格全英文,因为没有遇到单词,使用了word-wrap:break-word ,也没有用。就会出现

但是如果使用word-break:break-all 就会出现
word-break:break-all 与word-wrap:break-word的区别_第1张图片
如果是没有空格全汉字,使用word-wrap:break-word 是可以换行的,应该是默认每个字都是一个单词。
综述,使用word-break:break-all 比较靠谱。不过考虑美观性的话,也可以结合具体情况使用word-wrap :break-word

你可能感兴趣的:(web前端,html+css,word-wrap,:break-word,CSS3)