CODEWITHSUNDEEP
css
naveed
naveed

Reputation: 1465

Show truncated text normally, but show full text on hover

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.

Upvotes: 15

Views: 62285

Answers (2)

Arkadiusz &#39;flies&#39; Rzadkowolski
Arkadiusz &#39;flies&#39; Rzadkowolski

Reputation: 5827

I think this could work (available online at: http://jsfiddle.net/KGqnj/):

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

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

  }

</style>

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

Upvotes: 7

sachleen
sachleen

Reputation: 31141

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

Upvotes: 22

Related Questions