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

2021-09-22 16:34:02 字數 990 閱讀 2306

在我們日常的編碼中經常會遇到這段文字不可以換行,或者自動換行的需求。雖然這個功能在我們平時很常見但是我相信大家一定不會可以的去記住它吧(至少小月是很懶惰的從來是用什麼查什麼 ♦ 嘻嘻。。。)。今天我們來學習一下如何熟練的掌握用css實現文字的強制不換行/自動換行/強制換行的方法。需要的夥伴們可以來一起學習哦!

div
div
div
overflow:hidden 隱藏

white-space:normal 預設

pre 換行和其他空白字元都將受到保護

nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件

word-break:

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

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

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

建議大家做skin時,記得在body裡加 word-break: break-all; 這樣可以解決ie的框架被英文撐開的問題

以下引用word-break的說明, 注意word-break 是ie5+專有屬性

語法: word-break : normal | break-all | keep-all 引數: normal :  依照亞洲語言和非亞洲語言的文字規則,允許在字內換行 break-all :  該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字 keep-all :  與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字 說明: 設定或檢索物件內文字的字內換行行為。尤其在出現多種語言時。 對於中文,應該使用break-all 。

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...