为什么CSS ellipsis在表格单元格中不起作用?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

考虑以下示例:

HTML:

<table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>

CSS:

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JS:

$(function() {
  console.log("width = " + $("td").width());
});

结果如下:width = 139,ellipsis也不会出现。

我缺失了什么?

提问于
用户回答回答于

增加如下代码可解决问题:

td {
  display: block; /* or inline-block */
}

另一个可能的解决方案是table-layout: fixed;,并设置它的width
用户回答回答于

设置

table-layout:fixed;

在包含的表上,因此它在IE9中运行良好(如果使用最大宽度)。

扫码关注云+社区