2024年5月9日发(作者：)
div、p、td 的强制不换行及强制换行
2010-12-17 14:38:04| 分类： work note | 标签：div 字号：大中小 订阅
关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种
浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 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 英文和中文都在标点和空白处换行。
用css控制td强制换行 2008-10-23 16:11 即便是给td限定的宽度，但是如果里面的内容是连续的，IE就
认为是一个单词，不会换行。控制td换行的css样式：style="word-wrap:break-word;word- break:break-all;"
1
| 4 文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测 试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文 本测试信息文本测试信息文本测试信息文本测试信息 |
解决长串英文字母不能自动换行的问题和td中汉字自动换行 & CSS强制不换行
编程心得 2009-10-15 10:24 阅读85 评论0 字号： 大大 中中 小小 例如：
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行，将表格伸的很长很长，而
汉字字符却可以自动换行。
原因是：
英文字母之间如果没有空格，系统认为是一个单词，就不会自动换行。汉字就没有这种情况。
解决办法：
用表格把要显示的内容装起来。
在
| 标签中加入“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、不设置单元格宽度，但汉字会自动换行： 解决方法： |
发布评论