如何在具有空格的表格单元格中限制表格单元格的宽度:nowrap?

时间:2011-09-09 08:25:05

标签: html width css-tables

我有一个表格单元格,我想要有以下效果:

width: 100px;
white-space: nowrap;
overflow: hidden;

换句话说,单元格应该始终是单行文本(其内容保证包含没有HTML标记的纯文本),它应该最多为100px宽,如果文本较长,则应该剪切

不幸的是,当文本变长时,单元格仍会延伸。在IE和FF中测试,两者都是我的目标浏览器。

建议在单元格内添加<div>并将宽度设置为难度。该表是从gridview控件生成的,只是将指定的列宽添加到<td>元素,并按原样插入文本。

1 个答案:

答案 0 :(得分:7)

您可以设置max-width:100px。实例:http://jsfiddle.net/tw16/RuAVq/

td{
    width: 100px;
    max-width: 100px; /* add this */
    white-space: nowrap;
    overflow: hidden;
}

问题是,IE通常不支持此功能。

IE支持的另一个解决方案是使用float:left。实例:http://jsfiddle.net/tw16/RuAVq/1/

td{
    width: 100px;
    float: left; /* add this */
    white-space: nowrap;
    overflow: hidden;
}