正常显示截断的文本,但在悬停时显示完整的文本

Question

我有一个div,里面有一段左右的文字.我希望它能正常显示前几个单词,但展开以显示悬停时的全文.理想情况下,我只想使用CSS并且没有数据重复.

这就是我尝试过的:http://jsfiddle.net/SEgun/

我不希望div在文本扩展时移动,只有div 2才能展开以显示覆盖div 3的全文.这可能吗？PS我不关心延迟浏览器.

Answer 1

下面的CSS将导致div"覆盖"它下面的所有内容,因此它不会推送任何内容.

position: absolute;
background-color:#FFF;

背景颜色很重要,因此您无法看到下面的内容.

为确保所有内容都保持在同一位置,您可以为下一个元素指定与行高相同值的上边距.该+标志是相邻的兄弟选择器.

div {
    line-height: 20px;
}
#data:hover+div {
    margin-top:20px;
}

DEMO

Answer 2

怎么样:http://jsfiddle.net/KGqnj/