背景
笔者在做多国语言时，碰到中英文切换的场景，当切换到英文时，发现在一些容器里，如果英文单词过长则会溢出，就使用了word-break：break-all来防止文字溢出。
但是这样就发生了一些问题，因为word-break：break-all这个属性比较霸道，当单词长度过长，那么就会将这个单词截断。
如果换成属性word-wrap:normal ，解决了单词不换行的问题，此时又会发现文字溢出的问题没有解决。因此笔者对word-break与word-wrap进行了深入探讨。
区别
word-break指定了怎样在单词内断行word-wrap指示 Web 浏览器是否可以在单词内进行换行，防止溢出（比word-break温和，当这一行没有可换行的点时就会拆分单词防止溢出）word-wrap强调的是是否允许单词内断句，而word-break强调的则是怎么样来进行单词内的断句。
网络异常，图片无法展示
|
网络异常，图片无法展示
|
最佳实践
非特殊情况不使用word-break: break-all。如有必要使用word-break:normal与word-wrap:break-word结合即可。
word-wrap:normal指示了单词不换行，为了防止文本溢出容器，因此需要word-wrap。word-wrap:break-word指示当这一行没有可换行的点时就会拆分单词防止溢出，并且与word-break:break-all不同的是，word-break:break-all会比较霸道，当这个单词在这一行容不下时会直接在这一行中进行断行，而word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句。
相关链接：
word-break:break-all和word-wrap:break-word的区别
你真的了解word-wrap和word-break的区别吗？
