CSS學習筆記 文字換行顯示(word wrap)

2022-07-13 06:09:12 字數 528 閱讀 5575

在css3中新定義了文字換行屬性,word-wrap:

換行技術比較分析

ie定義了多個換行處理屬性:line-break、word-break、word-wrap,另外css1定義了white-space,css3增加了word-wrap。

在ie瀏覽器下,使用word-wrap:bireak-word;宣告可以確保所有文字正常顯示。

在firefox瀏覽器下,中文不會出現任何問題,英文語句也不會出現問題,但是長串英文就會出現問題。為了解決長串英文的問題,一般將word-wrap:break-word;和word-break:break-all;宣告結合使用。但是,這種方法會導致普通英文單詞被斷開顯示。

為了解決這個問題,可使用word-wrap:break-word;overflow:hidden;

,而不是word-wrap:break-word;word-break:break-all;。word-wrap:break-word;overflow:hidden;在ie下沒有任何問題,但在firefox下,長串英文單詞的部分內容會被遮住。

文字換行顯示

看到乙個部落格寫到 發現是 white space nowrap,即強制文字不進行換行,順便看了一下文字換行的屬性word wrap,總結如下 white space的預設只是normal,自動換行。word break break all和word wrap break word表示強制換行,前者...

CSS文字換行始末

昨天我在編輯某個網頁的時候,某種原因長按了乙個字母,結果發生下圖這樣的事情 內容已經被我重新修改過,但是原文還是跟它一樣,有一長串英文,然後是中文,接著是一段規則的英文 對此在csdn請教了高手,原來瀏覽器是把那一長串的英文當做了乙個單詞。對此,我作了乙個極端的測試,就是在一長串英文中間加入標點符號...

css限制文字換行

css 設定文字只顯示一行,多餘顯示省略號 view text顯示多行 思路 1.超出的文字隱藏 2.溢位用省略號顯示 3.溢位不換行 4.將物件作為彈性伸縮盒子模型顯示 5.從上到下垂直排列子元素 設定伸縮盒子的子元素排列方式 6.這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示的行數...