word-wrap：用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象
word-break：用来标明怎么样进行单词内的断句
word-wrap:normal 和word-break:normal 都是浏览器默认的处理方式，有区别的是word-wrap:break-word 、word-break:break-all、word-break: keep-all
word-wrap:break-word 在长单词或 URL 地址内部进行换行。
word-break:break-all 允许在单词内换行，简单粗暴，在长短字符串的任何位置都会换行
word-break: keep-all 只能在半角空格或连字符处换行。
<!DOCTYPE html> <html> <head> <style> p.test0 {width:11em; border:1px solid #000000;} p.test1 {width:11em; border:1px solid #000000; word-wrap:break-word;} p.test2 {width:11em; border:1px solid #000000; word-break: break-all;} p.test3{width:11em; border:1px solid #000000; word-break:keep-all;} </style> </head> <body> <p class="test0">wordwrap:normal000, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p class="test1">wordwrap:breakword, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p class="test2">wordbreak:breakall, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p class="test3">wordbreak:keepall0, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p> </body> </html> |
word-break:break-all太过于粗暴，用的会后要特别注意 |
我们在日常显示一段文字时，应该不常会有一个长单词就超过了容器范围的情况，大部分都是在某一行的最后可能会有一个长单词，对于这种情况，为了让他们左右对齐，可以使用text-align:justify，如下所示：
参考：https://www.cnblogs.com/2050/archive/2012/08/10/2632256.html