javascript - div内溢出span的宽度，IE9

Question

我需要查明 span 的内容是否溢出了它的父级 div。它在 Chrome 和 FF 中工作正常，但在 IE9 中不工作。我有以下 HTML 结构:

<div class="wrapper">
  <span>Dynamic text content, which may or may not overflow the parent</span>
</div>

使用以下 CSS:

.wrapper {
  display: inline-block;
  width: 80px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在“真实”浏览器(即非 IE)中，很容易检查跨度是否比 div 宽:

var innerSpan = $('.wrapper span');
var wrapperDiv = innerSpan.parent();
if (innerSpan.width() > wrapperDiv.width()) {
    // Overflow has happened
}

但在 IE9 中，对 innerSpan.width() 的调用仅返回可见尺寸，当然它总是小于包装器的尺寸。如何在 IE9 中检测文本是否溢出？

注意:它只需要适用于 IE9，不适用于 IE8、IE7 或任何其他版本。

编辑
我找到了一个解决方案，它检测溢出但要求跨度有 display: block;。请参阅下面我的回答。

Answer 1

span 的高度是 18px 作为文本的高度。当文本溢出 .wrapper div 时，span 的高度会自动增加。

    var height=$('.wrapper span').css("height").replace('px','');
    console.log(height);
    if(parseFloat(height) > 18){
        console.log("overflow occured");
    }

DEMO