css - 正常显示截断的文本，但在悬停时显示全文

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;
}

演示

Answer 2

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