看下代码的区别就一目了然了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p style="background:blue; width:200px; color:#fff;word-break: break-all;">word-wrap和word-break的区别吗?NNNNNNNNNNN1111111111111111111111</p>
<p style="background:blue; width:200px; color:#fff; word-wrap:break-word;">word-wrap和word-break的区别吗?NNNNNNNNNNNNNNNNNNNNNNNNNNNNN1111111111111111111111111</p>
</div>
</body>
</html>
效果图
word-break: break-all正如其名字,所有的都换行。毫不留情,一点空隙都不放过;
word-wrap:break-word 如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,则就不打英文单词或字符的主意了,让这些换行点换行,至于对不对齐,好不好看,则不关心,因此,很容易出现空白的情况