本文列举了兼容 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>
分享到:
相关推荐
在温和条件下合成了两种水溶性膦配体:三(4-甲氧基-3-磺酸钠苯基)膦(简称:4-MOTPPTS)和三(2-甲氧基-3-磺酸钠苯基)膦(简称:2-MOTPPTS)。在水/有机两相体系中,以 RhCl(CO)(TPPTS)2 为催化剂前体,考察...
顺鑫农业-000860-深度报告:短中长逻辑清晰,牛栏山享受全方位升级
主要给大家介绍了关于shell中长命令的换行处理方法,文中通过示例代码介绍的非常详细,对大家学习或者使用shell具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
在Word里面,选插入菜单中的符号“特殊符号”,选择“制表符”,可以看到第一个符号就是长破折号。连续输入几个即可。也可以选择对话框里的第三个“不间断连字符”,操作是一样的。 方法六、制表位法 用格式里的...
在数据加密和数据压缩中常需要对特殊的字符串进行编码。给定的字母表A 由26 个小写英文...输入数据第一行给出一个字符串。 Output 程序运行结束时,将计算结果输出字符串的编码。 Sample Input a Sample Output 1
2.在帐户列表对话框中长按某一条目可将对应的帐户设置为默认帐户。 其他说明: 在“网络”页面填入的用户名和密码仅当次生效。 联系作者: 李颖 (@独毒火) liruoer2008@yeah.net 更新日期: 2016-4-23
高效降解菌强化处理废水中长链烷烃的效能研究,王宏,刘硕,为探究微生物菌剂对废水中长链烷烃的降解机制,由实验室分离得到的以长链烷烃为唯一碳源的降解菌株D-3和L-2,长链烷烃废水采用人工
电信设备-处理通信系统中长时延的方法.zip
中长绒棉良种繁育基地建设项目-精品创业书模板.rar
2. 均线的含义:在本指标中,均线的含义以股价波动的速度为主,重点观察中长均线与比例线交叉时的变化。 3. 0轴比例线上的数字表示:0轴比例线上的数字表示到最后一周期的天数。 4. 适用场景:该指标适用于任何周期...
中长绒棉良种繁育基地建设项目-精品创业书模板.doc
本资源摘要信息主要介绍了一种新的中长基线GPS RTK解算方法,该方法可以有效地消弱站间星间双差对流层延迟和电离层延迟的影响,提高中长基线实时动态高精度定位的成功率和可靠性。 知识点一:中长基线GPS RTK解算...
昌晖SWP-TSR200中长图真彩无纸记录仪英语资料pdf,昌晖SWP-TSR200中长图真彩无纸记录仪英语资料
20210609-长城证券-顺丰控股-002352-公司深度报告:短中长三期改善叠加,开启价值回归之路.pdf
顺鑫农业-000860-深度报告:短中长逻辑清晰,牛栏山享受全方位升级
银行:7月金融数据点评-企业中长贷回升,表外融资边际改善.pdf
2.在帐户列表对话框中长按某一条目可将对应的帐户设置为默认帐户。 其他说明: 1.在“网络”页面填入的用户名和密码仅当次生效。 2.希望体验XDPlayer更多功能请下载XDPlayer完整版(http://fir.im/xdp)。 联系作者...
multisim14,高频实验仿真