以百分比形式给出省略号

我正在尝试省略span里面的元素td元素。问题是省略号有效当且仅当我给出span元素具有固定宽度，即宽度（以像素为单位）。但在我的项目中，我不能使用固定宽度span元素。这span元素必须完全拉伸到各自的内部td可以通过使用的元素width: 100%.

我的问题是：如何通过拉伸省略号来正常工作span元素完全在td元素？

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

这里是Fiddle http://jsfiddle.net/venkateshwar/F7pdr/

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

PS：由于一些项目限制，我无法动态计算跨度的宽度。

EDIT：我无法限制 td 元素的宽度，因为我正在 td 元素上实现列可调整大小。

简而言之，您需要添加以下内容：

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

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

现场小提琴：http://jsfiddle.net/m5gGr/ http://jsfiddle.net/m5gGr/