css之自動換行

2021-04-22 11:10:54 字數 1224 閱讀 5615

自動換行問題,正常字元的換行是比較合理的,而連續的數字和英文本元常常將容器撐大,挺讓人頭疼,下面介紹的是css如何實現換行的方法

對於div,p等塊級元素

正常文字的換行(亞洲文字和非亞洲文字)元素擁有預設的white-space:normal,當定義的寬度之後自動換行

html

css如下:

1.(ie瀏覽器)連續的英文本元和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行或者

效果:可以實現換行。

2.(firefox瀏覽器)連續的英文本元和阿拉伯數字的斷行,firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字元隱藏或者,給容器新增滾動條

效果:容器正常,內容隱藏 

對於table

1. (ie瀏覽器)使用 table-layout:fixed;強制table的寬度,多餘內容隱藏

效果:隱藏多餘內容  

2.(ie瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th採用word-break : break-all;或者word-wrap : break-word ;換行

效果:可以換行 

3. (ie瀏覽器)在td,th中巢狀div,p等採用上面提到的div,p的換行方法

4.(firefox瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th採用word-break : break-all;或者word-wrap : break-word ;換行,使用overflow:hidden;隱藏超出內容,這裡overflow:auto;無法起作用

效果:隱藏多於內容

5.(firefox瀏覽器) 在td,th中巢狀div,p等採用上面提到的對付firefox的方法

(載自:藍色理想:http://www.blueidea.com/tech/web/2006/3469.asp)

CSS之自動換行

關鍵字 迅雷 google baidu 瀏覽器 容器 百分比 樣式 大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。...

css 自動換行

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap ddd111111111111111111...

CSS自動換行

1 換行 1 css實現td的自動換行 在做專案時有時會出現文字過多,一行不能完全顯示,需要換行顯示的要求,現在了解一下下吧 td元素的nowrap屬性表示禁止單元格中的文字換行,但使用時還要注意,nowrap屬性的行為與td元素的width屬性有關。若未設定td寬度,則nowrap屬性可以起作用,...