兼容多浏览器，兼容 div、p、td 的强制不换行及强制换行

转自：http://www.cnblogs.com/dudu837/archive/2012/03/06/2382257.html

关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。 
文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。 
强制不换行 
div, 
td {     white-space:nowrap; } 
这点在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。在 IE 的 td 中却很复杂： 
如果没有为 td 指定宽度，则上述代码仍然有效。  
如果为 td 指定了宽度，并且文字中无标点、无空格，上述代码不再有效。可以加 word-break:keep-all; 解决，这是 CSS3 的内容，不过是 IE 最先提出的，所以 IE6 中也支持。  
如果为 td 指定了宽度，并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。 综合起来，为了简单，使用： 
div {     white-space:nowrap;     //一般我用这个实现不换行 } 
只是为了兼容 IE 的 td 的不同情况，在文字与 td 之间套一层 div。 
强制换行 
强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaa）时不撑大布局。 
div, td { 
    word-break:break-all; } 
word-wrap:break-word; 兼容性不够广，所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td，非常不错，遗憾的是 Firefox 中不支持这个属性，所以无效果，为了不让其挤乱表格，可以加 overflow:hidden 来凑合着解决。 
知其然知其所以然 
上面介绍了三种属性： 
white-space : normal | nowrap  
word-wrap : normal | break-word  
word-break : normal | break-all | keep-all white-space 
空白的处理方式，不止两个属性值，但在 IE6 中只支持这两个，所以不介绍其他的。 
normal 多个连续英文空格压缩为一个英文空格显示，在空白处可换行。  
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。 word-wrap 
内容超过容器边界时是否断开转行。 
normal 允许（只是允许，不是必须）内容顶开指定的容器边界。  
break-word 内容将在边界内换行。 word-break 
换行的方式。 
normal 英文在标点和空白处换行，中文在任何地方换行。  
break-all 英文和中文都在任何地方换行，比如从一个英文单词的中间拆开换行。  keep-all 英文和中文都在标点和空白处换行。

关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。 
文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。 
强制不换行 
div, 
td {     white-space:nowrap; } 
这点在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。在 IE 的 td 中却很复杂： 
如果没有为 td 指定宽度，则上述代码仍然有效。  
如果为 td 指定了宽度，并且文字中无标点、无空格，上述代码不再有效。可以加 word-break:keep-all; 解决，这是 CSS3 的内容，不过是 IE 最先提出的，所以 IE6 中也支持。  
如果为 td 指定了宽度，并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。 综合起来，为了简单，使用： 
div {     white-space:nowrap; } 
只是为了兼容 IE 的 td 的不同情况，在文字与 td 之间套一层 div。 
强制换行 
强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaa）时不撑大布局。 
div, td { 
    word-break:break-all; } 
word-wrap:break-word; 兼容性不够广，所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td，非常不错，遗憾的是 Firefox 中不支持这个属性，所以无效果，为了不让其挤乱表格，可以加 overflow:hidden 来凑合着解决。 
知其然知其所以然 
上面介绍了三种属性： 
white-space : normal | nowrap  
word-wrap : normal | break-word  
word-break : normal | break-all | keep-all white-space 
空白的处理方式，不止两个属性值，但在 IE6 中只支持这两个，所以不介绍其他的。 
normal 多个连续英文空格压缩为一个英文空格显示，在空白处可换行。  
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。 word-wrap 
内容超过容器边界时是否断开转行。 
normal 允许（只是允许，不是必须）内容顶开指定的容器边界。  
break-word 内容将在边界内换行。 word-break 
换行的方式。 
normal 英文在标点和空白处换行，中文在任何地方换行。  
break-all 英文和中文都在任何地方换行，比如从一个英文单词的中间拆开换行。  keep-all 英文和中文都在标点和空白处换行。

解决长串英文字母不能自动换行的问题和td中汉字自动换行 & CSS强制不换行 
编程心得   2009-10-15 10:24   阅读85   评论0   字号： 大大  中中  小小 例如：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行，将表格伸的很长很长，而汉字字符却可以自动换行。 

原因是： 英文字母之间如果没有空格，系统认为是一个单词，就不会自动换行。汉字就没有这种情况。 
解决办法： 
用表格把要显示的内容装起来。 在<table>标签中加入“style='TABLE-LAYOUT: fixed'”, 
在需要强制单词换行的<td>标签中加入“style='word-WRAP: break-word'”。 这样就可以了。 

      Div 中 ：   
div 实现长英文字母自动换行CSS IE浏览器 
#wrap{white-space:normal; width:200px; } 或者 
#wrap{word-break:break-all;width:200px;} 
Firefox浏览器 
#wrap{white-space:normal; width:200px; overflow:auto;} 或者 
#wrap{word-break:break-all;width:200px; overflow:auto; } 

2、不设置单元格宽度，但汉字会自动换行： 
      解决方法： <table style='word-break:keep-all'> 

CSS强制不换行 
word-break属性, keep-all；不换行。。     IE7和FF   , IE6 不行。。 
white-space: nowrap;        IE6 及一下版本 
顺便写下语法： 
语法： 
white-space : normal | pre | nowrap  取值： 
normal   : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行  
pre   : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象  
nowrap   : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性  
说明： 
设置或检索对象内空格字符的处理方式。 
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体    来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。 
此属性作用于块对象。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 
对应的脚本特性为 whiteSpace

 

CSS强制换行

 近来在项目中又遇上讨厌的换行问题，所以不得不又google一下，总算完成了任务。对于CSS不熟悉的朋友可以学习以下的文字。以下内容来自网络，欢迎相互交流。 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

css #wrap{white-space:normal; width:200px; } 1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all; width:200px;} 或者 #wrap{word-wrap:break-word; width:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以实现换行 2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条 #wrap{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：容器正常，内容隐藏 对于table 1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

效果：隐藏多余内容 2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以换行 3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法 4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word- break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890

效果：隐藏多于内容 5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法