网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

word-wrap和word-break的区别(兼容 IE 和 FF&

【 网络作者:佚名 更新时间:2008-08-01 | 字体:
[导读]本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap和word-break的区别。 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; ...

本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap和word-break的区别<。

兼容 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同word-break的区别

word-wrap:
normal   Default. Content exceeds the boundaries of its container.
break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。

word-break:
normal   Default. Allows line breaking within words. 好像是只对Asian text起作用。
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

总结如下:

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">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</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>

友荐云推荐
  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者<<。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们<,我们会尽快予以更正<>。
  • 了解这些字:
  • RSS订阅
    • QQ邮箱
    • 填写您的邮件地址,订阅我们的精彩内容:
    更多
    © 2014 网站运营 - T086.com(原itlearner.com)
    微商货源 | 冠珠陶瓷 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 |
    RunTime:17.27ms QueryTime:7