Show full text on hover with text-overflow: ellipsis
#html#css
Andrew Elans

Andrew Elans @andrewelans

About: This is my sketchbook where I put things I consider relevant to remember in future and share with others.

Location:
Oslo, Norway
Joined:
Feb 27, 2024

Show full text on hover with text-overflow: ellipsis

Publish Date: Dec 1 '24
2 0

Inspired by this post where someone would

want to have an active title property for only those list items that trigger the text-overflow rule on the list. So you can hover the mouse over any text that is truncated and see a tooltip of its full text

Here is my approach.

<div>
    <span><span>Some longer text visible on hover</span></span>
    <span><span>Another longer text visible on hover</span></span>
    <span><span>Short text</span></span>
</div>
Enter fullscreen mode Exit fullscreen mode 
div {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
div>span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span>span:hover {
    position: absolute;
    background-color: rgba(5, 255, 255, 1);
}
Enter fullscreen mode Exit fullscreen mode

If CodePen refuses to connect, click Rerun button bottom right.

Comments 0 total

    Add comment