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的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请到我的留言本提出
下面是提到的例子的效果
猜你喜欢
- "神经衰弱"翻牌游戏考察玩家的记忆力,游戏的开头会短时间给你看一小部分牌的图案,当玩家翻开两张相同图案牌的时候,会消除,
- 在图片处理中,霍夫变换主要是用来检测图片中的几何形状,包括直线、圆、椭圆等。在skimage中,霍夫变换是放在tranform模块内,本篇主
- 下面通过实例代码给大家分享Python切片操作去除字符串首尾的空格的方法,具体内容如下所示:#利用切片操作,实现一个trim()函数,去除字
- Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自
- 本文实例为大家分享了python实现nao机器人身体躯干和腿部动作的具体代码,供大家参考,具体内容如下跟上一篇类似,代码没什么难度,可以进行
- 1.字符串大小写转value = "wangdianchao"# 转换为大写big_value = value.uppe
- 一、使用loadVariables 一个例子简单的描述了如何通过GET方法向服务器端的ASP发送请求: _root. pushAc
- 相信很多人像我一样在学习python,pandas过程中对数据的选取和修改有很大的困惑(也许是深受Matlab)的影响。。。到今天终于完全搞
- 终于下决心把python从2.7升到了3.7。懒人安装当然使用Anaconda。安装成功,编译成功。但是用pip 安装包的时候提示:pip
- 在使用"get"时,抓取的页面最后加上编码类型 <% 服务器端:servletactioncontext.getr
- 1 前言前面已经讲了很多次要进行数据存储,终于在上一篇中完成了数据库的设计,在这一篇就开始数据的存储操作,在数据存储的这个部分,会将之前抓取
- 讲了很多数据容器操作,这篇我们看看时间的处理。开发中常用的日期操作有哪些?获取当前时间获取系统秒数(从 * 时间开始)日期跟秒数之间转换获取日
- Django上传文件最简单最官方的方法1.配置media路径在settings.py中添加如下代码:MEDIA_ROOT =&nb
- 最近因为项目需求,需要写个爬虫爬取一些题库。在这之前爬虫我都是用node或者php写的。一直听说python写爬虫有一手,便入手了pytho
- 有一编文章是用JavaScript对XML文件操作来实现无限级联动菜单的,我们可结合ASP来完成对数据库值的读取,然后写入XML文件,再用J
- 前言:python提供了诸多的魔法方法,其中__setattr__()方法主要用于类实例进行属性赋值,其定义在Object类官方提供的说明如
- 语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷。我们经常会这么写function ca
- 使用 argparse 模块为应用程序设置命令行选项。有一些第三方库用于命令行解析,但标准库 argparse 与之相比也毫不逊色。无需添加
- 我的项目环境:平台:Windows10语言环境:python3.7编译器:PyCharmPyTorch版本:1.11.0PyG版本:2.1.
- rstrip()方法返回所有字符都被去除的字符串(缺省为空格字符)结束字符串的副本。语法以下是rstrip()方法的语法:str