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

有个需求需要实现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 合并多余空格,保留多余空行,文字自动换行

参考资料: