Detect text-overflow has worked and add tooltip containing full text

Question

I have a simple span containing an email address.

<span id="email">[email protected]</span>

In my CSS, the span is set to a fixed width with ellipsis overflow.

#email {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

This works fine. However, I'd like to detect that it's worked somehow and display the full text in the span's title attribute.

How can I do this? Pure CSS would be perfect, but if that's not possible then jQuery is the next best thing.

Answer 1

You can't detect an overflow with CSS. But using JavaScript it's simply this:

JavaScript

var e = document.getElementById('email');

if (e.scrollWidth > e.clientWidth) {
    alert("Overflow");
}

Demo

Try before buy