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:

    <style>
    #data {
    border: solid 2px blue;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    #data:hover{
    overflow: visible; 
    white-space: normal; 

    }
    </style>

    <div>1: ONE</div>
    <div id="data" style="border: 1px solid #0ff; ">
    2: oianset osietnoasiedj oino aosietnoin oasiento oaseitnoind oisentoasintoon         oisentoiansetoino oiasentoin oi asetin doinae oidnoajosi doinalketn oiwdnota onioiante oaidno </div>
    <div>3: THREE</div>

(available online at 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? I don’t care about supporting obscure 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