單詞不換行 CSS實現強制換行的解決方法

2021-10-16 07:05:18 字數 980 閱讀 2204

強制換行用white-space的normal,pre-wrap,pre-line換行,即使有overflow: hidden; text-overflow: ellipsis;也不影響換行。

1、強制不換行

div
2、自動換行

div
3、強制英文單詞斷行

div
4、css設定不轉行5、設定強行換行英文不換行

css裡加上 word-break: break-all; 問題解決。這個問題只有ie才有,在ff下測試,ff可以自己加滾動條,這樣也不影響效果 建議大家做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...