首页 >> 技术文章 >> 详细内容
网页设计中解决数字不自动换行的问题

         在网页设计中,我们会遇到英文或者数字不能够自动换行,在以前的TABLE布局中,我们可以用

很好的解决这个问题。

         那在DIV+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;}

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将多出的内容隐藏,以免影响整体效果)

特别注意一点的就是:这些代码并不是所用通用的,我们要根据自己使用的实际情况啊,有正对性的进行更改,只有如此才会使我们的网页更加绚丽!

南京服务器托管 | 南京企业建站 | 南京网站建设 | 南京网站优化 | 南京中绘谷网络技术有限公司 | 467.cn
| 整理发布 | TEL:13913852884,025-58633651,QQ:21390019

发布者:admin 发布时间:2010-7-18 阅读:2856

Baidu
Copyright © 2002-2018 467.Cn All rights reserved    南京华昊网络技术有限公司    版权所有
备案序号:苏ICP备13052121号    ISP经营许可证:苏B2-20080166    ICP/SP经营许可证:苏B2-20130350      苏公网安备 32011102010099号
地址:南京市江北新区大桥北路77号电信大楼5楼    电话:025-58633651(8线)  传真:025-58497310    E-mail:467cn@163.com    邮编:210032
网址:Www.467.Cn    QQ在线支持:点击这里给我发消息 点击这里给我发消息