css强制换行的属性word-wrap和word-break

今天在开发中，测试提出一个bug，超出盒子的宽度文字没有自动换行，当时我在自测的时候只考虑到了中文，忽略了英文，数字以及一些特殊字符。我们知道，中文超出盒子的宽度会自动换行，内容的高度撑起盒子的高度

image.png

但是如果是英文或者数字，特殊符号就会出现超出盒子边框的情况

image.png

然后我见网上给出俩个方法：

• word-wrap：break-word
• word-break : break-all

这俩种方法都能使英文数自动换行。这里我主要想说的是俩者的区别：
word-wrap：break-word以单词为单位换行，如果有个字符串足够长，空余的空间不能容下这个串，就会自动换到下一行。所以，缺点也很明显，前一行会留很大的空白

image.png

word-break : break-all就能很好的解决上边的问题。它不管你字符串有多长，只要超出盒子的宽度就会强制性的自动换行。缺点就是，会把一个完整的字符串（英语单词）截成上下俩部分

image.png