2008年6月12日 星期四

[CSS] DIV容器斷行

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 CSS如何將他們換行的方法!

對於div

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

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

eg.
<div>ddd1111111111111111111111111111111111</div>


效果:可以實現換行

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

eg.

<div>XXXXXXXXXXXXXXXXXXX1111111</div>

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

【下列文章您可能也有興趣】

沒有留言: