Detect if text is overflowing

Question

Is there a way to check if an element's text is overflowing its container?

For example, I have a <p> with width: 100px. This element has text that takes up 105px. I can see that my text-overflow: ellipsis is applied, but I'd like to know in my JS too.

jQuery or plain js is fine.

See http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery, http://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content, http://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements — dsgriffin, Jul 07 '13 at 01:00

score 0 · Answer 1 · answered Jul 07 '13 at 01:10

You could do something like this:

/*
 *  @param el  DOM element or jQuery object
 *  @return w  width of the text
 */
function getOverflowWidth(el) {
    var $el = $(el);
    var span = $el.wrapInner('<span />').find('span');
    var w = span.width();
    $el.html(span.html());
    return w;
}

Detect if text is overflowing

1 Answers1