CSS实现文字自动换行(兼容Firefox)
摘要:大家都知道.文字在网页编写的时候是可以自动换行的.但是有一个让我们很头疼的就是英文往往是不能自动换行的.特别是连在一起的英文.有的时候我们会...
大家都知道.文字在网页编写的时候是可以自动换行的.但是有一个让我们很头疼的就是英文往往是不能自动换行的.特别是 连在一起的英文.有的时候我们会用CSS来限制表格的属性.比如OVERFLOW:HIDDEN,但这个属性不能很好的达到我们所要的目的.下面我们就来 介绍用CSS实现文字换行的几种方法.供大家参考:
对于div
1、(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div >ddd1111111111111111111111111111111111</div>
效果:可以实现换行
2、(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条 效果更好! #wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div >ddd1111111111111111111111111111111111111111</div>
效果:容器正常,内容隐藏
对于
1、(IE浏览器)使用样式table-layout:fixed;
以下为引用的内容:
<style>
.tb{table-layout:fixed}
</style>
<table width="80">
<tr>
<td>www.qpsh.com www.qpsh.com www.qpsh.com
</td>
</tr>
</table>
效果:可以换行
2、(IE浏览器)使用样式table-layout:fixed与nowrap
以下为引用的内容:
<style>
.tb {table-layout:fixed}
</style>
<table width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行
3、(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
以下为引用的内容:
<style>
.tb{table-layout:fixed}
</style>
<table width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:两个td均正常换行
4、(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
以下为引用的内容:
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style> <table width=80>
<tr>
<td width=25% nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)
对于div
1、(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div >ddd1111111111111111111111111111111111</div>
效果:可以实现换行
2、(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条 效果更好! #wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div >ddd1111111111111111111111111111111111111111</div>
效果:容器正常,内容隐藏
对于
1、(IE浏览器)使用样式table-layout:fixed;
以下为引用的内容:
<style>
.tb{table-layout:fixed}
</style>
<table width="80">
<tr>
<td>www.qpsh.com www.qpsh.com www.qpsh.com
</td>
</tr>
</table>
效果:可以换行
2、(IE浏览器)使用样式table-layout:fixed与nowrap
以下为引用的内容:
<style>
.tb {table-layout:fixed}
</style>
<table width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行
3、(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
以下为引用的内容:
<style>
.tb{table-layout:fixed}
</style>
<table width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:两个td均正常换行
4、(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
以下为引用的内容:
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style> <table width=80>
<tr>
<td width=25% nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)
【CSS实现文字自动换行(兼容Firefox)】相关文章:
上一篇:
DIV+CSS网页设计常用布局代码
下一篇:
仿网易div+css滑动门选项卡效果
相关阅读
网友关注
- 微软Visio 2016/Project 2016 MSDN版官方ISO镜像下载
- PPT/WORD文档无法打开怎么办 打不开PPT/WORD文档的原因
- 腾讯云发布12款新品 未来5年将投入过百亿
- 免费PDF阅读器PDF-XChange Viewer 2.5.315下载 支持win10
- windows版Office 2016正式版发布时间确定! 9月22日发布
- WORD神操作! 菜鸟真的看不懂
- 微软企业服务Azure/Office 365大涨价 8月1日执行
- Excel表格打开的时候提示文件错误数据可能丢失该怎么办?
- Office 2016中文预览版内含激活码更新下载 新功能很强大
- Excel表格中方向键不能移动单元格该怎么办?
网友最新关注视频
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,辽宁省
- 沪教版牛津小学英语(深圳用) 五年级下册 Unit 10
- 冀教版小学数学二年级下册第二单元《余数和除数的关系》
- 化学九年级下册全册同步 人教版 第18集 常见的酸和碱(二)
- 北师大版数学四年级下册第三单元第四节街心广场
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案,安徽省
- 第五单元 民族艺术的瑰宝_16. 形形色色的民族乐器_第一课时(岭南版六年级上册)_T1406126
- 第19课 我喜欢的鸟_第一课时(二等奖)(人美杨永善版二年级下册)_T644386
- 8.练习八_第一课时(特等奖)(苏教版三年级上册)_T142692
- 河南省名校课堂七年级下册英语第一课(2020年2月10日)
精品推荐