我正在尝试省略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 http://jsfiddle.net/venkateshwar/F7pdr/
我正在寻找一个可以是纯 css 或 javascript 或 jQuery 的解决方案。该解决方案应该适用于 IE8+ 和 Firefox。
PS:由于一些项目限制,我无法动态计算跨度的宽度。
EDIT:我无法限制 td 元素的宽度,因为我正在 td 元素上实现列可调整大小。
简而言之,您需要添加以下内容:
table {
width: 100%;
table-layout:fixed;
}
原因不在span
元素但因为表的td
元素没有定义 33% 宽度 - 它们根据宽度扩展td
内容。要使它们固定宽度,您需要应用table-layout:fixed;
规则到你的table
.
现场小提琴:http://jsfiddle.net/m5gGr/ http://jsfiddle.net/m5gGr/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)