关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果相同,所以省略 p。
文中“没有指定宽度的 td”是指:为 table 指定了宽度,但没有给 td 指定宽度。
强制不换行
这点在 Firefox 的 div 和 td 中,以及 IE 的 div 中,均没有问题。在 IE 的 td 中却很复杂:
综合起来,为了简单,使用:
只是为了兼容 IE 的 td 的不同情况,在文字与 td 之间套一层 div。
强制换行
强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaa)时不撑大布局。
word-wrap:break-word; 兼容性不够广,所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td,非常不错,遗憾的是 Firefox 中不支持这个属性,所以无效果,为了不让其挤乱表格,可以加 overflow:hidden 来凑合着解决。
知其然知其所以然
上面介绍了三种属性:
white-space
空白的处理方式,不止两个属性值,但在 IE6 中只支持这两个,所以不介绍其他的。
word-wrap
内容超过容器边界时是否断开转行。
word-break
换行的方式。