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

问题描述

我有一个div，其中包含一段或多段文字。我希望它能正常显示前几个单词，但请展开以显示悬停时的全文。理想情况下，我只想使用CSS而不进行数据重复。

I have a div with a paragraph or so of text inside it. I'd like it to show the first few words normally, but expand to show the full text on hover. Ideally, I'd like to do it with only CSS and without data duplication.

这就是我尝试过的方法：

This is what I've tried: http://jsfiddle.net/SEgun/

我不希望div移动当文本扩展时，仅将div 2扩展以显示覆盖div 3的全文。这可能吗？附言我不在乎浏览器的功能。

I don't want the divs to move when the text expands, only for div 2 to expand to show the full text covering div 3. Is this possible? P.S. I don't care about retarded browsers.

推荐答案

下面的CSS将使div覆盖其下面的所有内容，因此它

The CSS below will cause the div to "cover" everything below it so it doesn't push any content down.

position: absolute;
background-color:#FFF;

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

The background color is important so you can't see the stuff below.

要确保所有内容都位于同一位置，可以为下一个元素提供与行高相同值的上边距。 + 符号是选择器。

To make sure everything stays in the same place, you can give the next element a top margin of the same value as the line height. The + sign is the adjacent sibling selector.

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

这篇关于正常显示截断的文本，但悬停时显示全文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！