css強制換行和強制不換行

2021-07-02 18:16:53 字數 3009 閱讀 9499

**:

中文情況下

我們用div,p,ul,li(等塊級元素)布局給其設定了特定的width,那麼就會自動的換行。

用span,a(等內聯元素)設定了display:inline-block,或者display:block;也可以自動換行了。

(div布局)

含英文不會自動換行,會超出來

(div布局)

強制換行

我們一般控制換行所用到的css屬性一共三個:word-wrap;word-break;white-space;

word-wrap語法:各瀏覽器均能識別

網上的結論

word-wrap:normal(預設)|break-word;

引數:normal:允許內容頂開指定的容器邊界。

break-word:內容將在邊界內換行,必要時觸發word-break(注意請分辨清楚word-break和break-word兩個是不同的東西,乙個為屬性,乙個為引數);

說明:word-wrap是控制是否」為詞斷行」的,設定或檢索當前行超過指定容器時是否斷開轉行。中文沒有任何問題,語句也沒有問題,但是對於長串的英文,就不起作用。

範例:congratulation這個單詞屬於長串英文,word-wrap:break-word整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷,這就是對於長串文字不起作用的解釋。word-wrap:normal是預設情況,英文單詞不被拆開。

結論:作用範圍僅為div這類標準塊級元素,th,td這類table元素雖然識別但是沒有效果(如果為td,th加上寬度word-wrap在ie下是能夠發揮效果的,但根據完全相容性方便記憶角度上來說還是以前面的結論為準)。

自己的結論【ie7,8,9firfox,谷歌(只測過這幾個)】

問題:含英文會自動換行。(加上word-wrap:break-word;)

(div布局)

word-break語法:

引數

word-break:normal(

預設)||break-all||keep-all  firefox、opera不能識別

normal: 依照亞洲語言和非亞洲語言的文字規則,允許在字內換行。

break-all: 該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字。

keep-all: 與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字。

word-break:break-all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題(恰恰彌補了上面word-wrap:break-word對於長串文字不起作用的缺陷)。

範例:繼續以上面congratulation這個單詞屬於長串英文,word-break:break-all它會把單詞截斷,該行末端就會變成類似conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。

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

(ie下)

結論:作用範圍僅為div這類標準塊級元素,th,td這類table元素雖然識別但是沒有效果(經測試chrome下word-break:break-all是有效果的,但根據完全相容性方便記憶角度上來說還是以前面的結論為準)。firefox,opera是無法識別word-break的,更不用提firefox下的th,td中使用word-break的效果了。

自己的結論:火狐下不相容這個屬性,ie,谷歌瀏覽器相容

white-space語法:

white-space: normal(預設) | pre | nowrap

引數:normal: 預設。空白會被瀏覽器忽略。

pre: 空白會被瀏覽器保留。其行為方式類似html中的pre標籤。

nowrap: 文字不會換行,文字會在在同一行上繼續,直到遇到br標籤為止。

說明:對於pre屬性,其實就是html中連續的多個空白符會被合併,然後為了不讓他合併(最常用的場合就是表示**文字縮排)讓其中的空白符繼續保留而不需要我們增加額外的樣式和標籤來控制它的縮排和換行。pre標籤的原理也是一樣的內部預設有了個white-space:pre。

對於nowrap屬性,這個是強制不換行核心,一般強制不換行就是利用這個屬性。firefox的div和td中,以及ie的div中,均沒有問題。唯一的瑕疵就是在ie的td中會有乙個問題,如果td沒有指定寬度,則nowrap仍然有效,如果td有寬度,並且文字中無標點、無空格(例如中文長串文字),nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。

結論:基本上設定完這個屬性後基本的換行問題都能夠解決而不會出現table中td,th因為裡面各個內容的多寡發生搶奪其他td,th寬度的情形發生。這時如果你依舊有強制換行問題,那麼在此td中內部加一層div,那麼情況就會像上面討論的方式來解決。

強制不換行的問題到是比較容易分析的,就如上面所討論的那樣使用white-space:nowrap,firefox的div和td中,以及ie的div中,均沒有問題。唯一的瑕疵就是在ie的td中會有乙個問題,如果td沒有指定寬度,則nowrap仍然有效,如果td有寬度,並且文字中無標點、無空格(例如中文長串文字),nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。綜合下來,比較穩妥的方式是在文字與td之間再套一層div,然後使用nowrap,那麼就是強制不換行。注意這時候很有可能文字會過多導致溢位容器,所以你還得加乙個overflow:hidden,防止溢位容器,這樣子就可以相容各個瀏覽器了

強制不換行,多餘的部分用省略overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

摘自:

css實現強制不換行 自動換行 強制換行

強制不換行 div自動換行 div強制英文單詞斷行 divcss設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 word b...

css實現強制不換行 自動換行 強制換行

強制不換行 div 自動換行 div 強制英文單詞斷行 div css設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 wor...

css實現強制不換行 自動換行 強制換行

強制不換行 div 自動換行 div 強制英文單詞斷行 div css設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 wor...