Обнаружить, если текст переполнен

Как вы можете обнаружить, что текст переполнен? Например, следующий текст длиннее, чем разрешает контейнер div. Как я могу обнаружить это в javascript?

<div style="max-width: 100px; white-space:nowrap; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

Ответ 1

Если вы используете jQuery, вы можете попробовать сравнить ширину div с его scrollWidth.

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flown
}

Ответ 2

Вы можете определить, будет ли текст соответствовать до того, как отобразите элемент. Таким образом, вы можете использовать эту функцию, которая не требует, чтобы элемент был на экране.

function textWidth(text, fontProp) {
    var tag = document.createElement('div')
    tag.style.position = 'absolute'
    tag.style.left = '-99in'
    tag.style.whiteSpace = 'nowrap'
    tag.style.font = fontProp
    tag.innerHTML = text

    document.body.appendChild(tag)

    var result = tag.clientWidth

    document.body.removeChild(tag)

    return result;
}

Использование:

if (textWidth('Text', 'bold 13px Verdana') > elementWidth) {
    ...
}

Ответ 3

Плагин jQuery для проверки того, что текст переполнен, но не написан очень хорошо, но работает так, как предполагается, что он работает. Проводка этого, потому что я не нашел рабочий плагин для этого где угодно.

jQuery.fn.hasOverflown = function () {
   var res;
   var cont = $('<div>'+this.text()+'</div>').css("display", "table")
   .css("z-index", "-1").css("position", "absolute")
   .css("font-family", this.css("font-family"))
   .css("font-size", this.css("font-size"))
   .css("font-weight", this.css("font-weight")).appendTo('body');
   res = (cont.width()>this.width());
   cont.remove();
   return res;
}

Ответ 4

Для иллюстративных целей позвольте сказать, что ваш div имеет id="d", тогда вы можете сделать:

var d = document.getElementById('d'),
    dWider;
d.style.maxWidth = '9999em';
d.style.overflow = 'visible';
dWider = d.offsetWidth > 100;
d.style.maxWidth = '100px';
d.style.overflow = 'hidden';

Тогда var dWider будет true, если текст переполняется и false, если это не так.