4

我正在尝试为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;
}

这是小提琴

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

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

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

4

3 回答 3

4

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

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

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

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

于 2013-07-12T07:01:36.107 回答
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;
}

演示

有关 box-flex 属性的更多信息

于 2013-07-12T07:02:08.393 回答
1

您可以潜在地将max-width属性添加到td元素：

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

这是jsFiddle

于 2013-07-12T07:06:56.647 回答