RSS订阅
PHP程序员站--WWW.PHPERZ.COM  
网站地图
高级搜索
收藏本站

 当前位置:主页 >> 网页制作 >> CSS >> 文章内容
css之自动换行
[收藏此页[打印本页]   
来源:互联网  作者:未知  发布时间:2007-12-26

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

www phperz com

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
以下为引用的内容:
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>


css
以下为引用的内容: www.phperz.com
#wrap{white-space:normal; width:200px; }

www phperz com

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
以下为引用的内容:
#wrap{word-break:break-all; width:200px;}

www.phperz.com


或者
以下为引用的内容:
#wrap{word-wrap:break-word; width:200px;}


以下为引用的内容:
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
www phperz com
PHP程序员站--PHP程序员之家

效果:可以实现换行 www phperz com

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

以下为引用的内容:
#wrap{word-break:break-all; width:200px; overflow:auto;}

以下为引用的内容:
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

PHP程序员站--PHP程序员之家


www phperz com

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

PHP程序员站

对于table www phperz com

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

PHP程序员站

以下为引用的内容:
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

 上一篇:DedeCms初学者的入门使用指南   下一篇:php中rename()函数的妙用
 
 相关文章
 
发表评论
全部评论(0条)
 
 站内搜索
 热门搜索 mysql  基础  php基础  url
高级搜索 网站地图 站长工具 IP查询 收藏本站
 热点文章
 随机推荐
网站首页 | 网站地图 | 高级搜索 | RSS订阅
PHP程序员站 Copyright © 2007,PHPERZ.COM All Rights Reserved 粤ICP备07503606号 联系站长