检测文本是否溢出

Question

有没有办法检查元素的文本是否溢出其容器？

例如，我有<p> width: 100px。此元素的文本占用105px。我可以看到我的text-overflow: ellipsis已应用，但我也想在我的JS中知道。

jQuery或plain js很好。

Answer 1

你可以这样做：

/*
 *  @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;
}