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