以百分比表示省略号 [英] Give ellipsis in percentage

问题描述

我试图向省略号赋予 td 元素内的 span 元素。问题是当且仅当我给予 span 元素一个固定宽度，即以像素为单位的宽度时，省略号才工作。但在我的项目中，我不能使用固定宽度到 span 元素。 span 元素必须在相应的 td 元素中完全展开，这可以通过使用 width ：100％

I am trying to give ellipsis to a span element which is inside td element. The problem is that the ellipsis is working if and only if I give the span element a fixed width i.e width in pixels. But in my project, I can't use a fixed width to the span element. The span element must be completely stretched inside the respective td element which is possible by using width: 100%.

我的问题是：如何通过拉伸 td 元素中的<$ c> span 元素？

My question is: How to make the ellipsis work fine by stretching the span element completely inside the td element?

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

这是 小提琴

我在寻找一个可以是纯CSS的解决方案或javascript或jQuery。解决方案应该在IE8 +和firefox中工作。

I am looking for a solution which can be a pure css or javascript or jQuery. The solution should work in IE8+ and firefox.

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

PS: I can't calculate the width of the span dynamically due to some project restrictions.

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

EDIT: I can't restrict the widths of the td elements, because I am implementing column resizable on td elements.

推荐答案

您可以向 td 元素添加最大宽度属性：

You can potentially add a max-width property to the td element:

th, td {
    width: 33%;
    border: 1px solid black;
    max-width:200px;
}

这里是 jsFiddle

这篇关于以百分比表示省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！