我有这样的结构:
<table>
<tr>
<td class = "one">This cell should has width 60%</td>
<td class = "two">
<div>
<div class = "three">Hint</div>
<div class = "four">
And ending of this string should be cutted out with ellipsis, no matter how long string will be
</div>
</div>
</td>
</tr>
</table>
使用 CSS
.one { width: 60%; }
.three {
display: none;
float: right;
}
.two:hover .three { display: block; }
.four {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
我希望左侧单元格的宽度始终为 60%,右侧单元格占据所有其他空间。当“提示”元素可见和不可见时,右侧单元格中的长单行文本应使用省略号截断。
我尝试过使用display: inline
、float: left
、position: absolute
,但没有得到任何结果不会破坏右侧的 float 提示元素。
jsFiddle 在这里:http://jsfiddle.net/Z2kLV/1/
此外,解决方案不必是跨浏览器的,我只需要它用于 chrome。
请帮忙,我做不到
最佳答案
我的搜索不够好,现在找到了我的答案 here
它是 - 将以下 css 添加到表格元素:
table {
width: 100%;
table-layout: fixed;
}
jsFiddle 上的工作示例:http://jsfiddle.net/Z2kLV/5/
关于width - 如何拒绝 "nowrap"以增加元素的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17126721/