IE/Chrome下实现td宽度自适应内容

Posted in web On 2011-02-16 03:43:30 .

有个需求需要实现td宽度自适应内容，发觉css中关于文字排版还是比较复杂的。

最终使用

width:1px;
word-break:keep-all; /* for ie */
white-space:nowrap; /* for chrome */

来实现。

word-break原来是IE的私有属性，但在CSS3草案中也吸收了。但CSS3草案中没有keep-all属性，所以对于这个需求，keep-all仍然是IE only的。

white-space是white-space-collapsing和text-wrap的组合。如下表

  New Lines Spaces and Tabs Text Wrapping 效果
normal Collapse Collapse Wrap 忽略多余空行和空格，文字自动换行
pre Preserve Preserve No wrap 保留所有空行和空白，文字不自动换行
nowrap Collapse Collapse No wrap 忽略多余空行和空格，文字不自动换行
pre-wrap Preserve Preserve Wrap 保留所有空行和空白，文字自动换行
pre-line Preserve Collapse Wrap 合并多余空格，保留多余空行，文字自动换行

参考资料：