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