Showing truncated text on hover using CSS ellipsis overlaps text below it

html css ellipsis
Nakib picture Nakib · Jan 17, 2016 · Viewed 49.4k times · Source

I have a name tag in the sidebar which should display single line and truncate if long text follow by triple dots (lorem ipsum...) and should show full text on hover.

I am able to achieve this using css but my problem is when full text is displayed it overlaps the text below it. (Images attached)

HTML

<p class="name">
    Lorem ipsum lorem ipsum lorem ipsum
</p>

CSS

.name{
    color: #0079c1;
    height: 2em; 
    line-height: 1em; 
    font-size: 20px;
    font-weight: 400;
    text-overflow: ellipsis;
    margin-bottom: 12px;
    cursor: pointer;
    word-break: break-all;
    overflow:hidden;
    white-space: nowrap;
}

.name:hover{
    overflow: visible; 
    white-space: normal; 
}

Here is a JSFiddle

Text overlapping on hover. Expected behaviour is it should push the content below it. enter image description here

Answer

Mi-Creativity picture Mi-Creativity · Jan 17, 2016

You can just add height:auto to the hover state and it'll work just fine:

JS Fiddle

.name{
    width:120px;
    color: #0079c1;
    height: 2em; 
    line-height: 1em; 
    font-size: 20px;
    font-weight: 400;
    text-overflow: ellipsis;
    margin-bottom: 12px;
    cursor: pointer;
    word-break: break-all;
    overflow:hidden;
    white-space: nowrap;
}
.name:hover{
    overflow: visible; 
    white-space: normal;
    height:auto;  /* just added this line */
}
<p class="name">
Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum
</p>
<span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.
</span>

Related questions

Applying an ellipsis to multiline text

Is there a solution to add ellipsis on last line inside a div with a fluid height (20%)? I found the -webkit-line-clamp function in CSS, but in my case the line number will be depending on window size. p { width:100%; height:20%; …

Read More
With CSS, use "..." for overflowed block of multi-lines

with overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "..." will be shown in the end of the line if overflowed. However, this will be shown only in one line. But I would like it to be shown in multi-lines. It may looks …

Read More
HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More