首页 > 代码库 > 换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张

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

 

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