在 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>

With the following 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或其他任何版本中运行。

编辑 我发现了一个解决方案，可以检测溢出，但需要将span的display: block;。请参见下面的答案。

- MW.

---

使用 outerWidth() 而不是仅使用 width() 呢？ - CodingIntrigue

@RGraham outerWidth也有同样的问题 - 它只返回可见长度。 - MW.

@ArunAravind 还有 offsetWidth，以及滚动宽度 scrollWidth。 - MW.

我不确定我理解你的要求，但请查看此链接：http://msdn.microsoft.com/zh-cn/library/ie/ms531135(v=vs.85).aspx - Emma

@PravinVaichal：我的错，现在已经修复了 :) 不幸的是，这个错误不在“真正”的代码中，所以它并没有解决原始问题。 - MW.

Answer 1

您的高度为18px，与文本高度相同。当文本溢出.wrapper div时，span的高度会自动增加。

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

演示

- Somnath Kharat

---

这似乎有效...尚未成功使用省略截断，但也许会出现。 - MW.

我稍微更新了问题的CSS，以展示我所说的截断。 - MW.

@MW。根据最新的更新，请查看此更新后的fiddle：http://jsfiddle.net/Somnath_k/BuX93/1/ - Somnath Kharat

在这里，你可以直接使用“width”进行操作。 - Somnath Kharat

真的很感谢您对此事花费了这么多时间 :) 最后一个示例在Firefox（可能也适用于Chrome）上可以正常工作，但在IE9中，它报告span标签的宽度为59，而不是400多个像素，也就是说，它只返回了span标签的可见宽度。 - MW.

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/ 希望能对您有所帮助！

- Emma

---

该元素实际上已经存在于DOM中。问题在于找到一种方法来获取IE9中span的宽度，即使span的一部分被隐藏了（因为父div具有overflow: hidden和whitespace: nowrap）。 - MW.

Answer 3

当我强制将span本身设置为块级，并在其上设置overflow和text-overflow属性时，它就起作用了。然后我可以使用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!");
}

- MW.