CSS之自動換行_CSS/HTML

來源:互聯網
上載者:User
大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 CSS如何將他們換行的方法!
對於div
1.(IE瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。

#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

ddd1111111111111111111111111111111111

效果:可以實現換行

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; }

ddd1111111111111111111111111111111111111111

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

對於table

1. (IE瀏覽器)使用樣式table-layout:fixed;







abcdefghigklmnopqrstuvwxyz 1234567890


效果:可以換行

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







abcdefghigklmnopqrstuvwxyz 1234567890


效果:可以換行

3. (IE瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap








abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890


效果:兩個td均正常換行

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









abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890


這裡儲存格寬度一定要用百分比定義

效果:正常顯示,但不能換行(註:在FF下還沒有能使容器內容換行的好方法,只能用overflow將多出的內容隱藏,以免影響整體效果)
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.