1.首先，我们先来看浏览器默认情况下出现的bug:
.div0, .div1, .div2 {
width: 200px;
height: 50px;
background-color: #00CCFF;
margin-top: 20px;
}
<h3>浏览器默认情况</h3>
<div class="div0">
<p>this is just a testttttttttttttttttttttttttttttttttttttttttttttttttt!</p>
</div>
image.png
浏览器默认情况下，如果有一个单词很长，导致一行剩下的空间放不下，则浏览器会把这个单词挪到下一行去。但是如果新行还是放不下，则会溢出父元素。
2.word-wrap: break-word;
image.png
word-wrap: break-word; 会先另起一行，新的行放不到再把单词断了。
3.word-break: break-all;
image.png
word-break: break-all; 他不会去新起一行，而是直接在后面跟着，如果放不下，则会强制把单词折断。
网友评论