换行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 下，长串英文会被遮住超出的内容。

测试代码如下：

 

[xhtml]
  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><mce:style mce_bogus="1"><!--
  15. .c1{ width:300px; border:1px solid red}
  16. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
  17. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
  18. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
  19. .c5{ width:300px;word-break:break-all; border:1px solid black}
  20. .c6{ width:300px;word-break:keep-all; border:1px solid red}
  21. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
  22. --></mce:style><style mce_bogus="1" mce_bogus="1">.c1{ width:300px; border:1px solid red}
  23. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
  24. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
  25. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
  26. .c5{ width:300px;word-break:break-all; border:1px solid black}
  27. .c6{ width:300px;word-break:keep-all; border:1px solid red}
  28. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}</style>
  29. .c1{ width:300px; border:1px solid red}
  30. <div class="c1">
  31. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  32. </div>
  33. <div class=c1>
  34. This is all English. This is all English. This is all English.
  35. </div>
  36. <div class=c1>
  37. 全是中文的情况。全是中文的情况。全是中文的情况。
  38. </div>
  39. <div class=c1>
  40. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  41. </div>
  42. <br>
  43. .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
  44. <div class="c2">
  45. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  46. </div>
  47. <div class=c2>
  48. This is all English. This is all English. This is all English.
  49. </div>
  50. <div class=c2>
  51. 全是中文的情况。全是中文的情况。全是中文的情况。
  52. </div>
  53. <div class=c2>
  54. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  55. </div>
  56. <br>
  57. .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
  58. <div class="c3">
  59. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  60. </div>
  61. <div class=c3>
  62. This is all English. This is all English. This is all English.
  63. </div>
  64. <div class=c3>
  65. 全是中文的情况。全是中文的情况。全是中文的情况。
  66. </div>
  67. <div class=c3>
  68. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  69. </div>
  70. <br>
  71. .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
  72. <div class="c4">
  73. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  74. </div>
  75. <div class=c4>
  76. This is all English. This is all English. This is all English.
  77. </div>
  78. <div class=c4>
  79. 全是中文的情况。全是中文的情况。全是中文的情况。
  80. </div>
  81. <div class=c4>
  82. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  83. </div>
  84. <br>
  85. .c5{ width:300px;word-break:break-all; border:1px solid black}
  86. <div class="c5">
  87. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  88. </div>
  89. <div class=c5>
  90. This is all English. This is all English. This is all English.
  91. </div>
  92. <div class=c5>
  93. 全是中文的情况。全是中文的情况。全是中文的情况。
  94. </div>
  95. <div class=c5>
  96. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  97. </div>
  98. <br>
  99. .c6{ width:300px;word-break:keep-all; border:1px solid red}
  100. <div class="c6">
  101. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  102. </div>
  103. <div class=c6>
  104. This is all English. This is all English. This is all English.
  105. </div>
  106. <div class=c6>
  107. 全是中文的情况。全是中文的情况。全是中文的情况。
  108. </div>
  109. <div class=c6>
  110. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  111. </div>
  112. <br>
  113. .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
  114. <div class="c7">
  115. safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  116. </div>
  117. <div class=c7>
  118. This is all English. This is all English. This is all English.
  119. </div>
  120. <div class=c7>
  121. 全是中文的情况。全是中文的情况。全是中文的情况。
  122. </div>
  123. <div class=c7>
  124. 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  125. </div>
  126. </body>
  127. </html>

此文章由 http://www.ositren.com 收集整理 ,地址为: http://www.ositren.com/htmls/67568.html