CSS之自动换行

March 16th, 2009 | Tags: , ,

最近分享了一个主题,是关于连续字符自动换行的问题,这个现在来说已经很普遍了,几乎每天都会遇到类似的问题,但是目前来说还没有很完美的css实现各个浏览器都兼容的方法,在某些浏览器中也只能采取极端的解决办法。

在ie6/7以及以Webkit为核心的浏览器中,可以配合word-break:break-all;word-wrap:break-word;两个属性实现换行,只所以通过这2个属性的,是因为word-break:break-all;属性无法解决IE6/7浏览器中连续英文标点符号的换行。

但是在Firefox、opera以及ie8RC1中,仍然不支持此属性,目前也只能通过overfow:hidden;将超出固定容器的字符截断。这些都是针对div以及p之类的块集元素的,如果在table中需要实现同样的效果,除了需要对table做一个特殊的处理外,其他的支持跟上述提到的一样。

因为在table布局中拥有一个默认的属性table-layout:auto;而这个属性是基于table中文本内容进行计算的,显示比较慢,它通过读取table中每一个单元格的内容后才进行显示。所以默认情况下,就算是用上面的方法也不能实现table下面连续字符的自动换行。所以就需要针对这种情况设定一个table-layout:fixed;属性值,这个属性值刚好相反,是固定布局,跟内容无关,只与table中单元格的间距,table的宽度以及边框的宽度等水平布局元素有关,通过设定这个属性在结合上面的方法就可以实现table中连续字符自动换行的效果。

下面是几篇关于未来游览器的发展的文章:

word-wrap was supported by Firefox 3.1 alpha2
-ms-word-wrap Attribute | wordWrap Property
Microsoft CSS Vendor Extensions

No comments yet.

Bad Behavior has blocked 422 access attempts in the last 7 days.