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

Question

I have a simple span containing an email address.

dave@davemail.dave

In my CSS, the span is set to a

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