讓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截斷進行換行顯示。

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