首页 > 代码库 > 换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张
换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
word-break是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
兼容 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.
测试代码如下:
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>
======================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>字符换行</title>
- <mce: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}
- --></mce:style><style mce_bogus="1">.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>
- </body>
- </html>
换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张