订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

DIV+CSS之自动换行

http://www.cnscn.org 2008/4/23 23:28:13 深山行者 字体: 浏览 12310
自动换行问题,正常字符的换行是比较合理的,而连续的数字和 英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级 元素

正常文字的换行(亚洲文字和非亚洲文字) 元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字) 元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }

IE浏览器

连续的 英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

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

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

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

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

对于table 元素
IE浏览器
1. 使用 table-layout:fixed;强制table的宽度,多余 内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

2. 使用 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.在td,th中嵌套div,p等采用上面提到的div,p的换行方法

Firefox浏览器

1. 使用 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>

2.在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请回复,预览提到的例子的效果
相关阅读
XHTML+CSS兼容性解决方案小集
网页制作中关于浏览器宽度和高度的设定研究(转载)
仿taobao效果拼音字母检索功能
深山行者留言系统 v3.5
页面文字变色、变大、还原
ASP利用fso读取文件夹里所有文件的名字
windows颜色选择框
uni-app基础知识数组形式的数据绑定
共有0条关于《DIV+CSS之自动换行》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
jquery设置或获取修改classname
利用css3.0写出一个音乐播放的唱片碟盘的效果
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
更多>>最新添加文章
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
aliyun阿里云续费域名优惠口令(注册、续费都可以使用)
windows7环境下安装配置jdk
python对微信操作要用到这两个库wxpy与itchat
ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
解决国内 github.com 打不开的准确方法
更多>>随机抽取信息
CSS的十八般技巧
03 修改程序文件夹权限 获得修改数据权限
提交按钮在自定时间内灰色不可用
IE6.0, IE7.0和FireFox浏览器css样式兼容
中国青岛春秋国际旅行社有限公司
秀色摄影