兼容IE和FF的换行CSS推荐样式---word-wrap同word-break的区别

http://www.webshu.net/jiaocheng/web/CSS/200804/7747.html

 

http://xy.zhubajie.com/html/2009/03-10/192862.html

 

http://edu.codepub.com/2009/1022/16612.php

 

http://www.west263.com/info/html/wangzhanyunying/jianzhanjingyan/20090512/114352.html

 

 

 

<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>