CSS強制性換行word-break與word-wrap的使用

一般情況下，元素擁有默認的white-space:normal（自動換行，不換行是white-space:nowrap）,當錄入的文字超過定義的寬度后會自動換行，但當錄入的數據是一堆沒有空格的字符或字母或數字（常規數據應該不會有吧，但有些測試人員是會這樣子做的），超過容器寬度時就會把容器撐大，不換行。

所以解決方法（以IE，chrome,FF為測試瀏覽器）有兩種寫法：

p{
    word-break:break-all; 
    word-wrap:break-word;
}

兩種方法的區別說明：

1，word-break:break-all 例如div寬400px，它的內容就會到400px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

html代碼：

<div style="width:400px;background:#000;color:#fff;height:100px;margin:0 auto;word-break:break-all; ">
    congratulation congratulation congratulation congratulation congratulation congratulation
</div>
</br/>
<div style="width:400px;height:100px;background:#000;color:#fff;margin:0 auto;word-wrap:break-word;">
    congratulation congratulation congratulation congratulation congratulation congratulation
</div>

結果如圖所示：

這樣就一目了然了。