首先说一下：浏览器的默认行为，在一行中几个单词 排列着，如果最后一个长单词 太长时 首先是移到下一行，如果该单词的长度大于父元素的宽度，会溢出。
<!doctype html>
<html>
<head>
</head>
<body>
<div style="width:100px;border:1px solid #ccc;">hello world! this is a aaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body> </html>
1、word-wrap:break-word
w3school手册中这样解释的：允许长单词或 URL 地址换行到下一行，也就是说当一个单词的长度超出它所在的区域时 浏览器会将多余的字符移到下一行。
这个属性是只指先允许浏览器对长单词进行换行，因为当一个单词长度太长了，浏览器默认先把它移到下一行，然后如果设置了这个属性，长单词会截断
<div style="width:100px;border:1px solid #ccc;word-wrap: break-word;">hello world! this is a aaaaaaaaaaaaaaaaaaaaaaaaa</div>
2、word-break:break-all 属性规定自动换行的处理方法，在哪个位置进行截断
是指对于截断的处理方式是任何地方超出区域后都截断，当一行中最后的单词太长了，如果不加这个属性，那么浏览器会默认先把它下移，
设置这个word-break:break-all 属性后，在当前这一行中进行截断处理。
<div style="width:100px;border:1px solid #ccc;word-wrap: break-word;word-break: break-all;">hello world! this is a aaaaaaaaaaaaaaaaaaaaaaaaa</div>
