css - 在我的表中每个第二个单元格的末尾添加 '...'

Question

我想在表格中每个第二个单元格的末尾添加 3 个点(“...”)，因为这是一个随窗口大小扩展的列(请参见下面的屏幕截图)。

这是我的CSS:

table.list                 { table-layout:fixed; width: 100%; white-space: nowrap; }
table.list td              { border-bottom: 1px dotted #d9d9d9; height: 25px; padding-bottom: 2px; }
table.list th              { text-align:left; }
table.list td:nth-child(1), table.list th:nth-child(1) { width: 160px; }
table.list td:nth-child(2), table.list th:nth-child(2) { width: auto ; overflow:hidden; }
table.list td:nth-child(3), table.list th:nth-child(3) { width: 110px; padding-left: 20px; }
table.list td:nth-child(4), table.list th:nth-child(4) { width:  50px; padding-left: 20px; }

如您所见，第二个单元格是自动调整的(隐藏/显示文本因窗口宽度而异)。

这个我已经试过了:

table.list td:nth-child(2):after { content: "..."; }

它不起作用。

有什么建议吗？谢谢。

编辑

我更新了我的问题，因为在 Ofir Farchy 的帮助下我更进一步了。请在此处查看我的演示 http://jsbin.com/ulofoq/23/edit#preview使用 Internet Explorer。

Chrome 没问题，只有 Internet Explorer。

让我们尝试调整窗口大小，您会看到我在表格第一行的文本前面得到了“...”。没关系。但是对于第二行，这些 '...' 没有显示!!??

Answer 1

您是否尝试过将 text-overflow: ellipsis; 添加到相关单元格的样式中？

您可以阅读更多相关信息 here和 here .
我相信这是一个 CSS3 属性(几乎所有新浏览器都支持)。