我有这样的结构:
<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
,但没有得到任何不会破坏右侧浮动提示元素的结果。
jsFiddle在这里:http: //jsfiddle.net/Z2kLV/1/
此外,解决方案不必是跨浏览器,我只需要 chrome。
请帮忙,我做不到这个