CSS之自动换行 - CSS - 网页制作 - 站长资讯 - 一摘网站分类目录-免费收录各类优秀网站的中文网站目录
当前位置:一摘网站分类目录 > 首页 > 资讯首页 > 网页制作 > CSS > CSS之自动换行

CSS之自动换行

发表时间:2011-07-05内容来源:中国目录网整理  [我要投稿]  [免费提交网站]  转发微博:

  

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

对于div

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

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

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

<div >ddd1111111111111111111111111111111111111111</div>

效果:容器正常,内容隐藏

对于table

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

<style>
.tb{table-layout:fixed}
</style>

<table width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

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

<style>
.tb {table-layout:fixed}
</style>

<table width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

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

<style>
.tb{table-layout:fixed}
</style>

<table width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:两个td均正常换行

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

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>

<table width=80>
<tr>
<td width=25% nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>

这里单元格宽度一定要用百分比定义

效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
122
最新推荐                    我也要出现在这里 | 更多
快速链接
最新快速审核
动态图片基地每日最搞笑的gif动态图片大全与您共分享,网罗当下最热门的微信图片表
www.asqql.com
中国数字期刊网(www.shiziqikan.com)是提供论文发表、期刊合作、
www.shuziqikan.com
71读小说网是广大书友最值得收藏的网络小说阅读网,网站收录了当前最火最热的网络小
www.71du.com
大香蕉网是专业发放淘宝优惠券天猫超市优惠券的优惠券网站,每天数万种淘宝内部优惠券
www.daxiangjiao1234.com
读客吧汇聚经典原创小说,致力于打造最好最完善的免费网络小说阅读网,网站收录了当前
www.dukeba.com
ADS 广告位招租
一摘开放式网站目录
在线投稿提交网站关于我们帮助中心 广告赞助免责声明 隐私保护最新推荐友情连接意见反馈
Copyright © 2006-2011 一摘网络 版权所有  1zhai.com  All Rights Reserved
在线投稿,网站免费登录,新收录网站首页显示,所有排名全自动实时刷更新,网站推广的最佳选择就在一摘开放式网站目录
Powered by 一摘网络(1zhai.com)    快速审核|投放广告,请点击给我信息快速审核|投放广告
页面执行时间: 248.2 毫秒