其实一直不明白，也没有认真去想过 word-break 属性的 break-all 和 break-word 有什么区别
后来看了一个大神写的一篇博客，写得很详细，看了豁然开朗。
所以，我也就不在过多赘述，直接上demo，最后会附上原文链接
demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .div01,.div02 { width: 300px; } .div01 { word-break: break-all; } .div02 { word-break: break-word; } </style> </head> <body> <div class="div01">show me the money give me the money</div> <div class="div02">show me the money give me the money </div> </body> </html>
下面截图是上面demo的运行结果
第一行的英文使用了：word-break: break-all;
第二行的英文使用了：word-break: break-word;
共同点：
都是可以对英文单词进行断句换行
不同点：
word-break:break-all 紧接着前面的单词，并强行断句换行（比如上面截图中的 money 是紧跟着前面的 the）
word-break:break-word 不会紧接着前面的单词，而是整个单词直接另起一行 （比如上面截图中的 money，没有紧跟前面的 the，直接换行）
注：word-break上面的2个属性不仅适用于英文单词，还适用于数字；
原文链接：https://www.cnblogs.com/2050/archive/2012/08/10/2632256.html