word-wrap: break-word 和 word-break: break-all 到底有啥區別？

做項目改bug的時候，遇到過好多次，要么是文本超出文本區域，或者單詞太長(一般是url鏈接中的一些鬼)，把裝它的標簽強制撐大，導致一些響應式問題。除此之外，還有很多問題，每次都是恍然醒悟，然后又在網上查看，過幾天又開始淡忘。人老了，得承認，記性不好，筆記就應該起到重要性作用，對，就是這樣的。

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>

結果：

瀏覽器默認情況下，如果有一個單詞很長，導致一行剩下的空間放不下，則瀏覽器會把這個單詞挪到下一行去。但是如果新行還是放不下，則會溢出父元素。呵呵呵，這樣是不是很丑呀，如果在響應式下面，你就會發現，在moile端老是出現橫向滾動條，找呀找呀，最終是這個家伙搞的鬼！

2.word-wrap: break-word;

 .div1 { word-wrap: break-word; } 

 

<h3>word-wrap: break-word; </h3>
    <div class="div1">
        <p>this is just a testttttttttttttttttttttttttttttttttttttttttttttttttt!</p>
    </div>

 

結果：

word-wrap: break-word; 比較溫柔，會先另起一行，新的行放不到再把單詞斷了。

 3.word-break: break-all;

 .div2 { word-break: break-all;  } 

<h3>word-break: break-all;</h3>
    <div class="div2">
        <p>this is just a testttttttttttttttttttttttttttttttttttttttttttttttttt!</p>
    </div>

結果：

word-break: break-all; 這娃比較暴力，他不會去新起一行，而是直接在后面跟着，如果放不下，則會強制把單詞折斷。

這里把它整理記錄下來，希望以后遇到了，可以自己查看，哈哈哈哈哈。。。