css-自动换行 - 我爱贝贝 - 金东浩官方网站 - welcome to old.bbmy.net

css-自动换行 [金东浩官方网站版权所有]

2006年12月31日 | Category: » | by: 贝爸 | 本文包含金东浩css-自动换行照片

大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!

对于div
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。


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

#wrap{word-break:break-all;width:200px;}
效果:可以实现换行

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; }
效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed;


.tb{table-layout:fixed}
效果:可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap

.tb {table-layout:fixed}
效果:可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

.tb{table-layout:fixed}
效果:两个td均正常换行

3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

.tb {table-layout:fixed}
.td {overflow:hidden;}

这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)


from:http://www.blueidea.com/tech/web/2006/3469.asp

本文来自 我爱贝贝[www.bbmy.net]-金东浩官方网站,如若转载注明出处。


金东浩博客随机日志
金东浩博客之还是不快乐
还是不快乐
金东浩博客之逍遥津游玩
逍遥津游玩
金东浩博客之和美女拍照
和美女拍照
金东浩博客之吹泡泡
吹泡泡
金东浩博客之豹子装
豹子装
金东浩博客之外婆家回来
外婆家回来
金东浩博客之六一表演礼服
六一表演礼服
金东浩博客之补:和两位美女过家家
补:和两位美女过
金东浩博客之又生病了
又生病了
金东浩博客之巧遇小胖墩
巧遇小胖墩
金东浩博客之吃西瓜
吃西瓜
金东浩博客之端午节挂彩
端午节挂彩
金东浩博客之跷跷板
跷跷板
金东浩博客之脆弱的身体
脆弱的身体
金东浩博客之天热理发
天热理发
金东浩博客之七月补拍
七月补拍
金东浩博客之西瓜太郎
西瓜太郎
金东浩博客之感情脆弱
感情脆弱

金东浩日记Tags: ,
金东浩日记评论: 0 | 金东浩日记引用: 0 | 金东浩日记阅读: 2474
发表评论
昵称 [注册]        网址
密码 游客无需密码     电邮
打开HTML 打开UBB 打开表情 隐藏 记住我