内部div,IE9溢出跨度的宽度

Question

我需要找出a的内容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

当我强制跨度本身为块级并在其上设置溢出和文本溢出属性时，它起作用了。然后我可以使用scrollWidth和offsetWidth。这是代码：

HTML：

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

CSS：

.wrapper {
  display: inline-block;
  width: 80px;
  height: 20px;
}

.inner {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

最后是 JavaScript：

var innerSpan = $('.inner');
if (innerSpan[0].scrollWidth > innerSpan[0].offsetWidth) {
    console.log("Overflow!");
}