ie和firefox中css自动换行实现方法
作者:greengnn 来源:缔吧 发布时间:2008-04-08 12:49:00
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是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的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请到我的留言本提出
下面是提到的例子的效果
猜你喜欢
- 研究了几天Adodb.stream和XMLHTTP的应用,找了不少很有趣的教程,下面的代码是将一个远程的页面,图片地址保存到本地的实例。将代
- 今天开始学习 YUI,加强一下对 JavaScript 的理解。1. 命名空间 YAHOO
- SQL Server四类数据仓库建模的方法主要分为以下四类。第一类是关系数据库的三范式建模,通常我们将三范式建模方法用于建立各种操作型数据库
- 听说最近流行JQ风格的语法,不流行EXT风格了一.//ajax类fw=window.fw||{};fw.ajax = { &nbs
- 呵呵,先说明一下下面的程序大部分收集自网络,因为本人在asp编程中经常使用到随机函数,所以收集了一些这类的函数,并做了些注释,方便使用。首发
- 如果你想进一步了解如何用JavaScript来为网页添加交互性的话,你也许已经听过JavaScript的事件代理(event delegat
- 请问如何使用CDONTS组件来发送电子邮件?我们可以在IIS4下使用CDONTS来完成。首先要确认是否安装了SMTP服务(OPTIONPAC
- 问:我最近升级了一个应用程序,使其可以在 SQL Server 2005 上运行。我利用了允许行长度超出 8,060 个字节这项功能,以便用
- 我们经常会在登录一个网站的时候被引导页挡住前进的脚步,这一点在上个世纪到本世纪初的网站中尤其明显,特别是在企业网站里,几乎每个企业网站都会有
- 对于数据库管理员来说,可以经常想了解一些之前未听说过的存储过程,特别是无文档类型的存储过程。或许是用这些存储过程,能够简化日常的数据管理。为
- Update Scanner这个Firefox附加软件也是一种很好的选择。Update Scanner可以同时跟踪多个网页,并为不同的网页设
- 在windows+iis服务器上运行asp程序可能会出现数据库无法更新的情况,具体错误信息可能为: 1、Microsoft JET Data
- 以下是我做美工的两年生活中一条条总结出来的经验,每一点都是我常用的,虽然不是什么大学问,但我觉得要互相学习才能提高,所以现在拿出来和大家一起
- 虽然ting88没有注册的用户不能下载歌曲,但搞定它也非难事啊:)进入www.ting88.com的网站,把歌手专辑页面的URL复制到文本框
- 1、使用mysqldump工具将MySql数据库备份mysqldump -u root -p -c --default-character-
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 请按步骤进行,未进行前面的步骤时,请不要做后面的步骤,以免损坏你的数据库.一般不建议做第4,6两步,第4步不安全,有可能损坏数据库或丢失数据
- Rs.Open参数说明在ASP中经常用Rs.Open sql,conn,1,1这样的方式打开数据库,但仍有一部分同行不知道这是嘛意思,现整理
- innerHTML,outerHTML innerHTML检索或设置标签内的内容;outerHTML检索或设置整个标签的内容(包含标签)。&
- asp之家注:asp中FSO组件的功能很强大,如果没有FSO很难想象ASP会变成什么样。对于学习asp编程的朋友一定会接触到FSO相关的操作