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;
}

真实＆＃34;浏览器（即不是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

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

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

DEMO

Answer 2

元素必须存在于DOM中才能计算宽度。如果您需要在用户可以看到该元素之前进行计算，请在将其放入DOM之前尝试将其隐藏。

代码修改：

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

演示：http://jsfiddle.net/dWzeQ/2/

希望这会对你有帮助！

Answer 3

当我强制跨度本身为块级别并在其上设置溢出和文本溢出属性时，它工作。然后我可以使用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!");
}

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

3 个答案: