Обнаружение переполнения текста и добавление всплывающей подсказки, содержащей полный текст

Question

У меня есть простой диапазон, содержащий адрес электронной почты.

<span id="email">dave@davemail.dave</span> 

В моем CSS диапазон устанавливается на фиксированную ширину с переполнением многоточия.

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

Это прекрасно работает. Однако я бы хотел заметить, что он каким-то образом работает и отображает полный текст в атрибуте title диапазона.

Как это сделать? Чистый CSS был бы идеальным, но если это невозможно, то jQuery - это лучшая вещь.

Answer 1

Вы не можете обнаружить переполнение с помощью CSS. Но использование JavaScript это просто:

JavaScript

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

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

Demo

Try before buy