css 文字折行

2021-08-31 10:58:59 字數 1086 閱讀 6433

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下,長串會被遮住部分內容。

CSS設定文字折行處理

一般情況 只要定好文字所在容器的寬度文字就會折行,如下面 想控制一段文字不折行,設定如下的樣式 white space nowrap word wrap normal word break keep all 相反,如果一段文字不能折行了,那麼可能是設定了如上的樣式,則將樣式改為 white spac...

CSS文字如何折行介紹

white space 屬性設定程式設計客棧如何處理元素內的空白 空格 換行和tab字元 的處理。normal 預設。空白會被瀏覽器忽略。pre 空白會被瀏覽器保留。其行為方式類似 html 中的 標籤。nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到 程式設計客棧lt br 標籤為止。...

div折行 table折行問題

css控制自動換行,防止 或div等被撐開 折行 style table layout fixed word break break all word wrap break word fixed 固定布局的演算法。在這演算法中,水平布局是僅僅基於 的寬度,邊框的寬度,單元格間距,列的寬度,而和 內容...