本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap同word-break的区别。
引用的地址:
http://homepage.yesky.com/207/7707707.shtml
兼容 IE 和 FF 的换行 CSS 推荐样式
最好的方式是
以下是引用片段:
word-wrap:break-word; overflow:hidden;
而不是
以下是引用片段:
word-wrap:break-word; word-break:break-all;
也不是
以下是引用片段:
word-wrap:break-word; overflow:auto;
在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。
总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
另,测试代码如下:
1.htm
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">asdasd
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c1>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c6>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c7>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
分享到:
相关推荐
通过熟悉以上词汇和表达,可以有效提升在日语二级听力考试中的理解能力,帮助你更准确地捕捉关键信息,从而在考试中取得理想的成绩。记得结合实际场景练习,将这些词汇融入到日常的日语学习中。
根据提供的文件内容,我们可以提取出如下知识点: ...通过这些知识点,我们可以对2018年7月中国金融数据有一个全面的认识,以及了解银行业在当时宏观经济背景下的信贷和融资状况,并作出相应的投资判断和风险规避。
- 具有毒性、生物蓄积性、半挥发性,难以降解,可在环境中长距离迁移。 7. **风险评估**: - 利用科学技术信息评估危险对健康的风险,并选择合适的模型进行推断。 8. **食品中的残留物质**: - 在食品原料生产...
例如,对于一个包含多个编译选项的`emcc`命令,可以像这样处理: ```bash emcc -o ./dist/test.html\ --shell-file ./tmp.html\ --source-map-base dist\ -O3\ -g4\ --source-map-base dist\ -s MODULARIZE=1...
- 实际应用中的信道存在干扰和串音,这些被称为噪声。 - **信号类型**: - 模拟信号: 连续形式,易受干扰。 - 数字信号: 离散形式,稳定性高。 - 使用MODEM将模拟信号转换为数字信号或反之。 - **数字通信技术**:...
在这个对比分析中,主要涉及了四个知名的酒店管理系统:绿云iHotel、Opera(由石基代理)、西软和中软好泰。以下是对这些系统的详细分析: 1. 公司背景: - 绿云成立于2010年,拥有强大的研发团队,曾获得A轮融资...
- 解决方案:打浆有助于纸页在网案上形成均匀的层。 9. **厚度问题**: - 打浆对厚度有负面影响。 - 解决方案:如果其他测试结果允许,可以调整打浆度。 10. **折皱问题**: - 通常与烘干有关,反映纸幅网络质量...
### 计算机专业英语翻译技巧详解 #### 科技英语的特点 科技英语与一般英语在语音、词汇、语法等方面存在显著差异。 1. **语音**:科技英语的发音规则和一般英语相同,并无特殊之处。 2. **词汇**: - **基本词汇...
在温和条件下合成了两种水溶性膦配体:三(4-甲氧基-3-磺酸钠苯基)膦(简称:4-MOTPPTS)和三(2-甲氧基-3-磺酸钠苯基)膦(简称:2-MOTPPTS)。在水/有机两相体系中,以 RhCl(CO)(TPPTS)2 为催化剂前体,考察...
果树栽培学是一门深入研究果树种植与管理的学科,涵盖了果树的生物学特性、生长发育规律、品种选择、繁殖方法、整形修剪、病虫害防治、采收与储运等多个方面。以下是对苹果和梨栽培的一些关键知识点的详细阐述: 1....
这意味着开发者可以在同一个项目中同时使用托管和非托管的代码。 #### 2. **入门篇** - **用AutoCAD和.NET开始** (2006.7.3): - 对于初次接触 AutoCAD 和 .NET 的开发者来说,这是一个很好的起点。它介绍了如何...
在大连金州区,比如爱民代售点、金州客票代售点、汇金代售点等,也为当地居民和游客提供了购票服务,覆盖了站前街道、中长街道等多个社区,方便了周边居民出行。 大连经济技术开发区的代售点则包括明通、畅通、平安...
根据给定文件的信息,我们可以总结出以下几个主要的知识点: ### 1. 单基因遗传病的概念及实例 - **概念**:单基因遗传病是指由单一基因发生突变而导致的一类遗传性疾病。 - **实例**: - **苯丙酮尿症**:是一种...
### Windows10中长路径文件无法删除解决方法 #### 一、问题背景及原因分析 在Windows10操作系统中,用户经常会遇到一个令人头疼的问题:当试图...对于经常需要处理长路径文件的用户来说,这是一个非常实用的技巧。
- 第一个字节:表示特殊字节的数量减去1,即5。 - 第二个字节:表示短信的编码方式,如果采用非ASCII编码,则设置为0。 - 第三个字节:表示长消息信息的字节数,固定为3。 - 第四个字节:保留位,一般设置为0。 ...
自然语言处理(NLP)是计算机科学领域的一个重要分支,主要关注如何使计算机理解、生成和处理人类语言。在这个项目中,重点在于两个关键模型:Attention-based Sequence-to-Sequence(atten-seq2seq)模型和...
在数据加密和数据压缩中常需要对特殊的字符串进行编码。给定的字母表A 由26 个小写英文...输入数据第一行给出一个字符串。 Output 程序运行结束时,将计算结果输出字符串的编码。 Sample Input a Sample Output 1
【uni-app插件Calendar日历多选】是一个用于在uni-app框架中实现多日期选择功能的组件。uni-app是一款基于Vue.js开发的多端统一框架,它允许开发者编写一次代码,就能运行在H5、微信小程序、支付宝小程序、百度小...