讓DIV中文字換行顯示

1.

<style>div{white-space:normal;word-break:break-all;word-wrap:break-word; }</style><div style=" width:100px; border:1px solid red">I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>

未加css前效果：------->加上效果:

?

2.這三句重點在于:word-break與word-wrap

a:word-break??屬性規定自動換行的處理方法。

提示：通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。

值描述

normal	使用瀏覽器默認的換行規則。
break-all	允許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

b:word-wrap?屬性允許長單詞或 URL 地址換行到下一行。

值描述

normal	只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

還是看示例:

<style>div{ word-wrap:break-word; }</style><div style=" width:100px; border:1px solid red">I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>

結果:

將dobiiiiiiiiiiiiiiiiiii做為一個整體進行換行顯示。

?

<style>div{word-break:break-all;}</style><div style=" width:100px; border:1px solid red">I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>

結果：

將dobiiiiiiiiiiiiiiiiiii截斷進行換行顯示。

我想這下這兩個的區別應該很清楚了吧！

若轉載請注明出處！若有疑問，請回復交流！

總結

以上是生活随笔為你收集整理的让DIV中文字换行显示的全部內容，希望文章能夠幫你解決所遇到的問題。

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