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

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

{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>

結果如圖所示：

這樣就一目了然了。

如果您覺得本文對您的學習有所幫助，請多支持與鼓勵。

總結

以上是生活随笔為你收集整理的CSS基础篇--强制性换行word-break与word-wrap的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。