javascript - 检测文本是否溢出

Question

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

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

jQuery 或纯 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;
}