Show truncated text normally, but show full text on hover

Question

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/

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.

Answer 1

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

DEMO