DIV+CSS之自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和
英文字符常常将容器撑大,挺让人头疼,下面介绍的是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的方法
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请回复,预览提到的例子的效果
对于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的方法
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请回复,预览提到的例子的效果
前一页:用dl、dt、dd制作个性表格
后一页:CSS设计中常见的精华问题收集
- 相关阅读
- XHTML+CSS兼容性解决方案小集
- 网页制作中关于浏览器宽度和高度的设定研究(转载)
- 仿taobao效果拼音字母检索功能
- 深山行者留言系统 v3.5
- 页面文字变色、变大、还原
- ASP利用fso读取文件夹里所有文件的名字
- windows颜色选择框
- uni-app基础知识数组形式的数据绑定
- 共有0条关于《DIV+CSS之自动换行》的评论
- 发表评论
正在加载评论......
返回顶部发表评论
网友评论声明,请自觉遵守互联网相关政策法规。
您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。
- 更多>>同类信息
- jquery设置或获取修改classname
- 利用css3.0写出一个音乐播放的唱片碟盘的效果
- 利用css中的scale()实现放大缩小效果
- 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
- css背景使用base64编码或者将base64编码放在img图片标签中
- 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉