Div 自動換行問題

2021-05-23 12:16:40 字數 1113 閱讀 1198

相容 ie 和 ff 的換行 css 推薦樣式:

最好的方式是

word-wrap:break-word; overflow:hidden;

而不是word-wrap:break-word; word-break:break-all;

也不是word-wrap:break-word; overflow:auto;

這種最好的方式,在 ie 下沒有任何問題,在 ff 下,長串英文會被遮住超出的內容。

技術總結:

word-wrap是控制換行的。

使用break-word時,是將強制換行。中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。

break-word是控制是否斷詞的。

normal是預設情況,英文單詞不被拆開。

break-all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。

keep-all,是指chinese, japanese, and korean不斷詞。即只用此時,不用word-wrap,中文就不會換行了。(英文語句正常。)

ie下:

使用word-wrap:break-word;所有的都正常。

firefox下:

如這2個都不用的話,中文不會出任何問題。英文語句也不會出問題。但是,長串英文會出問題。

為了解決長串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式會導致,普通的英文語句中的單詞會被斷開(ie下也是)。

目前主要的問題存在於 長串英文 和 英文單詞被斷開。其實長串英文就是乙個比較長的單詞而已。即英文單詞應不應該被斷開那?那問題很明顯了,顯然不應該被斷開了。對於長串英文,就是惡意的東西,自然不用去管了。但是,也要想些辦法,不讓它把容器撐大。

用:overflow:auto; ie下,長串會自動折行。firefox下,長串會被遮蓋。

所以,綜上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

word-wrap:break-word;overflow:auto;在ie下沒有任何問題。在firefox下,長串會被遮住部分內容

div自動換行

它們的區別就在於 1,word break break all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長 congratulation等 它會把單詞截斷,變成該行末端為conra congratulation的前端部分 下一行為tulation cong...

css的div自動換行

相容 ie 和 ff 的換行 css 推薦樣式 最好的方式是 word wrap break word overflow hidden 而不是word wrap break word word break break all 也不是word wrap break word overflow auto...

DIV的內容自動換行

word break break all和word wrap break word都是能使其容器如div的內容自動換行 它們的區別就在於 1,word break break all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單 詞很長 congratulatio...