换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张

时间：2023-03-09 09:10:35
换行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>

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

  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>