沸腾展望新闻系统 当前在线5
  
  沸腾文摘  宁波文摘  旅游美食  试题资源  少儿资源 
       栏目导航  网站首页>>沸腾文摘>>建站文摘
  共有 5349 位读者读过此文   字体颜色:   【字体:放大 正常 缩小】    
【双击鼠标左键自动滚屏】【图片上滚动鼠标滚轮变焦图片】    
 

Css之自动换行

  发表日期:2008年7月6日   出处:尖锐之风!    作者:锐风     【编辑录入:base

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html:
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css:
#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:可以实现换行

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

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

对于table

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

效果:隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>

效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框


上一篇:FireFox2和FireFox3共存解决方案
下一篇:让宝宝及家人远离塑料瓶吧

 相关专题:

·专题1信息无

·专题2信息无
 
  热门文章:
 · 瑞星RavmonD.exe[38112]
 · 拯救MP3机,低格工具Fi[32856]
 · 2008年6月英语新四级真[32307]
 · 2007年12月英语新四级[30880]
 
 相关文章:

·没有相关文章

相关评论:(评论内容只代表网友观点,与本站立场无关!)
相关评论无
发表、查看更多关于该信息的评论 将本信息发给好友 打印本页

copyright © 2002-2009 forecast news [沸腾展望新闻多媒体系统]  V1.5Access版 b2 all rights reserved 浙ICP备14004706号

| 网站地图 | 联系我们 | 帮助中心 | 图片文摘 | 沸腾淘宝店铺 |

xml聚合新闻rss2.0 firefox全面支持 手机WAP浏览支持 creative commons license

新闻系统核心: 尘缘雅境  制作:杨正炎(雪域一线天) [后台管理]
页面执行时间:62.500毫秒