javascript - 以百分比给出省略号

Question

我正在尝试为 td 元素内的 span 元素提供省略号。问题是当且仅当我给 span 元素一个固定宽度时，省略号才有效，即以像素为单位的宽度。但是在我的元素中，我不能对 span 元素使用固定宽度。 span 元素必须在相应的 td 元素内完全拉伸(stretch)，这可以通过使用 width: 100% 实现。

我的问题是:如何通过将 span 元素完全拉伸(stretch)到 td 元素内来使省略号正常工作？

span {
    width: 100%;    /* In pixels, it is working fine */
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

这是 Fiddle

我正在寻找可以是纯 css 或 javascript 或 jQuery 的解决方案。该解决方案应适用于 IE8+ 和 firefox。

PS:由于元素限制，无法动态计算span的宽度。

编辑:我无法限制 td 元素的宽度，因为我在 td 元素上实现了可调整大小的列。

Answer 1

简而言之，您需要添加:

table {
    width: 100%;
    table-layout:fixed;
}

原因不在 span 元素中，而是因为表格的 td 元素没有定义 33% 的宽度 - 它们根据 td 的宽度展开> 内容。要使它们固定宽度，您需要将 table-layout:fixed; 规则应用到您的 table。

现场 fiddle :http://jsfiddle.net/m5gGr/