以百分比forms给出省略号

我试图将省略号赋予td元素内的span元素。 问题是,当且仅当我给span元素赋予固定宽度(即像素宽度)时,省略号才有效。 但在我的项目中,我不能使用固定宽度的span元素。 span元素必须在相应的td元素内完全拉伸,这可以通过使用width: 100%

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

 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元素上实现可resize的列。

您可以向td元素添加max-width属性:

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

这是jsFiddle

简而言之,您需要添加以下内容:

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

原因不在span元素中,而是因为table的td元素没有定义33%的宽度 – 它们根据td内容的宽度进行扩展。 要使它们固定宽度,您需要应用table-layout:fixed; 统治你的table

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

希望这可以帮到你

 .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

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