5

我需要找出 a 的内容span是否溢出了它的 parent 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）中，很容易检查 span 是否比 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;. 请看下面我的回答。

4

3 回答 3

1

跨度18px的高度与文本的高度相同。当文本溢出.wrapperdiv 时，跨度的高度会自动增加。

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

演示

于 2013-10-09T12:42:59.573 回答
0

该元素必须存在于 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/

希望对你有帮助！

于 2013-10-09T13:49:27.833 回答
0

当我强制跨度本身为块级并在其上设置溢出和文本溢出属性时，它起作用了。然后我可以使用 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!");
}
于 2013-10-11T12:18:53.543 回答