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

======================================================

[css] view plaincopyprint?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
5. <title>字符换行</title>  
6. <mce:style><!--  
7. .c1{ width:300px; border:1px solid red}  
8. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}  
9. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}  
10. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}  
11. .c5{ width:300px;word-break:break-all; border:1px solid black}  
12. .c6{ width:300px;word-break:keep-all; border:1px solid red}  
13. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}  
14. --></mce:style><style mce_bogus="1">.c1{ width:300px; border:1px solid red}  
15. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}  
16. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}  
17. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}  
18. .c5{ width:300px;word-break:break-all; border:1px solid black}  
19. .c6{ width:300px;word-break:keep-all; border:1px solid red}  
20. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}</style>  
21. .c1{ width:300px; border:1px solid red}  
22. <div class="c1">  
23. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
24. </div>  
25. <div class=c1>  
26. This is all English. This is all English. This is all English.  
27. </div>  
28. <div class=c1>  
29. 全是中文的情况。全是中文的情况。全是中文的情况。  
30. </div>  
31. <div class=c1>  
32. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
33. </div>  
34. <br>  
35. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}  
36. <div class="c2">  
37. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
38. </div>  
39. <div class=c2>  
40. This is all English. This is all English. This is all English.  
41. </div>  
42. <div class=c2>  
43. 全是中文的情况。全是中文的情况。全是中文的情况。  
44. </div>  
45. <div class=c2>  
46. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
47. </div>  
48. <br>  
49. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}  
50. <div class="c3">  
51. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
52. </div>  
53. <div class=c3>  
54. This is all English. This is all English. This is all English.  
55. </div>  
56. <div class=c3>  
57. 全是中文的情况。全是中文的情况。全是中文的情况。  
58. </div>  
59. <div class=c3>  
60. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
61. </div>  
62. <br>  
63. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}  
64. <div class="c4">  
65. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
66. </div>  
67. <div class=c4>  
68. This is all English. This is all English. This is all English.  
69. </div>  
70. <div class=c4>  
71. 全是中文的情况。全是中文的情况。全是中文的情况。  
72. </div>  
73. <div class=c4>  
74. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
75. </div>  
76. <br>  
77. .c5{ width:300px;word-break:break-all; border:1px solid black}  
78. <div class="c5">  
79. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
80. </div>  
81. <div class=c5>  
82. This is all English. This is all English. This is all English.  
83. </div>  
84. <div class=c5>  
85. 全是中文的情况。全是中文的情况。全是中文的情况。  
86. </div>  
87. <div class=c5>  
88. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
89. </div>  
90. <br>  
91. .c6{ width:300px;word-break:keep-all; border:1px solid red}  
92. <div class="c6">  
93. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
94. </div>  
95. <div class=c6>  
96. This is all English. This is all English. This is all English.  
97. </div>  
98. <div class=c6>  
99. 全是中文的情况。全是中文的情况。全是中文的情况。  
100. </div>  
101. <div class=c6>  
102. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
103. </div>  
104. <br>  
105. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}  
106. <div class="c7">  
107. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj  
108. </div>  
109. <div class=c7>  
110. This is all English. This is all English. This is all English.  
111. </div>  
112. <div class=c7>  
113. 全是中文的情况。全是中文的情况。全是中文的情况。  
114. </div>  
115. <div class=c7>  
116. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.  
117. </div>   
118. </body>  
119. </html>