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

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

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

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

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

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

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

Ответы

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

JavaScript

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

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

Demo

Попробуйте перед покупкой