CSS強制換行

2021-06-23 08:46:16 字數 1016 閱讀 6801

一般情況下,元素擁有預設的white-space:normal(自動換行,ps:不換行是white-space:nowrap),當錄入的文字超過定義的寬度後會自動換行,但當錄入的資料是一堆沒有空格的字元或字母或數字(常規資料應該不會有吧,但有些測試人員是會這樣子做的),超過容器寬度時就會把容器撐大,不換行。

解決方法(以ie,chrome,ff為測試瀏覽器):

以下是對這兩種方法的區別說明:

1,word-break:break-all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端為conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。

2,word-wrap:break-word 例子與上面一樣,但區別就是它會把congratulation整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉的。

3,word-break:break-all 支援版本:ie5以上 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字。

word-wrap:break-word 支援版本:ie5.5以上 內容將在邊界內換行。如果需要,詞內換行( word-break )也將發生。**自動換行,避免撐開。

語法:word-break : normal | break-all | keep-all

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

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

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

語法: word-wrap : normal | break-word

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

css強制換行

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

css 強制換行

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

css強制換行和強制不換行

中文情況下 我們用div,p,ul,li 等塊級元素 布局給其設定了特定的width,那麼就會自動的換行。用span,a 等內聯元素 設定了display inline block,或者display block 也可以自動換行了。div布局 含英文不會自動換行,會超出來 div布局 強制換行 我們...