以百分比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属性的更多信息