word-wrap: break-word 和 word-bre

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; 他不会去新起一行，而是直接在后面跟着，如果放不下，则会强制把单词折断。