1. 程式人生 > >div 標籤裡的內容或字串自動換行

div 標籤裡的內容或字串自動換行

一、

<div style="width:300px; height:auto; float:left;">

lsdkjflksdjflsdjf裡的房價是離開的解放路口lksjdlfdsdsdsdsdssdsdsdsdfjsdlkfjlsdjflskdf

</div>

(這種情況下,英文字元不會換行,因為沒有加 word-break:break-all;)

二、

<div style="width:100px; height:auto; float:left;">

是的立法教室裡的房價是離開的解放路口設計的是打發士大夫

</div>

(這種情況下完全可以換行,因為全是漢字,即使不加 word-break:break-all; 也可以實現換行)

總結:

(一般情況下,字串是一連串的英文的話,是不可以自動換行的,因為系統會把這麼長的英文預設為是一個字元,相當於一個詞,加上 word-break:break-all; 之後,即使字串是一連串的英文,也會自動換行的哦。。。)

追加:——————————————————————————>>

之前說的方法在火狐瀏覽器是不支援的哦,因為火狐瀏覽器不識別word-break:break:all; 本人又總結了新方法哦:

<div style=" width:200px; height:auto; float:left;white-space:normal; word-wrap:break-word; word-break:break-all;">
解決Firefox(火狐)用css實現英文數字自動換行的
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>

word-wrap:break-word;在火狐瀏覽器裡是能夠識別的,後面還要繼續加上word-break:break-all;否則其他瀏覽器就不能換行了,word-wrap:break-word;只有火狐瀏覽器能識別,其他瀏覽器是不能識別的,不過這個樣式的美中不足就是:特別長的字串會有點小弊端,比如上面這個例子裡有很多的dddddddddd,所以dddddd前面的漢字無法和他真正的銜接,會導致“換行的”後面有些空白,因為後面的英文字元太長,無法銜接,如果英文字元比較短,像一般的英文字元windows這樣的字元,還是可以實現完全換行的哦