首頁 > web前端 > css教學 > CSS讓網頁中的內容自動換行的實作方法

CSS讓網頁中的內容自動換行的實作方法

黄舟
發布: 2016-12-14 16:50:27
原創
1550 人瀏覽過

數字能是容器被撐大,不能根據容器的大小自動換行,以下是 CSS如何將他們換行的方法!

對於div

1.(IE瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。

#wrap{white-space:normal; width:200px; }

#wrap{word-break:break-all;width:200px;}

ddivdd1111111111111111111111111111999111111999909

效果:可以實現換行

2.(Firefox瀏覽器)white-space:normal; word-break:break-all;overflow:hidden;同樣的FF下也沒有很好的實現方法,只能隱藏或者加上滾動條,當然不加滾動條效果更好!

#wrap{white-space:normal; width:200px; overflow:auto;}

#wrap{word-break:break-all;width:200px; overflow:auto; }

ddd111111111111111111111111111111111111111

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

對於table

1。 :fixed}



mnopqrstuvwxyz 1234567890

mnopqrstuvwxyz 1234567890效果:可以換行

2.(IE瀏覽器)使用樣式table-layout:fixed與nowrap

abcdefghigklmnopqrstuvwxyz 1234567890



abcdefghigklmnopqrstuvwxyz 1234567890

效果:在可以換行時使用
百分比固定td大小情況下使用樣式table-layout:fixed與nowrap

abcdefghigklmnopqrstuvwxyz 1234567890 abcdefghigklmnopqrstuvwy> 1234567890正常換行

4.(Firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div





abcdefghigklmnopqrstuvxywxywxy> >

abcdefghigklmnopqrstuvwxyz 1234567890



這裡單元效果顯示,但不能換行(註:在​​FF下還沒有能使容器內容換行的好方法,只能用overflow將多出的內容隱藏,以免影響整體效果)
 更多相關文章請關注PHP中文網( m.sbmmt.com)!





相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板