一般情況下，元素?fù)碛心J(rèn)的white-space:normal（自動換行，不換行是white-space:nowrap）,當(dāng)錄入的文字超過定義的寬度后會自動換行，但當(dāng)錄入的數(shù)據(jù)是一堆沒有空格的字符或字母或數(shù)字（常規(guī)數(shù)據(jù)應(yīng)該不會有吧，但有些測試人員是會這樣子做的），超過容器寬度時(shí)就會把容器撐大，不換行。

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

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

兩種方法的區(qū)別說明：

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

2，word-wrap:break-word 例子與上面一樣，但區(qū)別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截?cái)嗟舻摹?/p>

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>

結(jié)果如圖所示：

這樣就一目了然了。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。