Question

我正在尝试将省略号提供给位于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

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

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

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

Answer 1

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

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

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

活小提琴：http://jsfiddle.net/m5gGr/

Answer 2

希望这可以帮到你

.parent-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;        
    min-width: 0;
}

.icon {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}

<强> DEMO

More about box-flex property

Answer 3

您可以在 td 元素中添加 max-width 属性：

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

这是jsFiddle

以百分比形式给出省略号

3 个答案: