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

Question

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

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

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

Answer 1

下面的CSS会导致div“覆盖”它下面的所有内容，因此它不会推送任何内容。

position: absolute;
background-color:#FFF;

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

为确保所有内容都保持在同一位置，您可以为下一个元素指定与行高相同值的上边距。 +符号是adjacent sibling选择器。

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

DEMO

Answer 2

这个怎么样：http://jsfiddle.net/KGqnj/