div内溢出跨度的宽度，IE9答案

【问题标题】：Width of overflowing span inside div, IE9div内溢出跨度的宽度，IE9
【发布时间】：2013-10-16 17:49:59
【问题描述】：

我需要查明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）中，很容易检查 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;。请参阅下面的答案。

【问题讨论】：

outerWidth() 而不是 width() 怎么样？
offsetWidth 和 offsetHeight
@RGraham outerWidth 有同样的问题 - 它只返回可见长度。
@ArunAravind 和 offsetWidth 一样，scrollWidth 也是如此。
我不确定是否满足您的要求，但请检查：msdn.microsoft.com/en-us/library/ie/ms531135(v=vs.85).aspx

标签： javascript jquery html css internet-explorer

【解决方案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

【讨论】：

这似乎有效...还没有设法让它与省略号截止一起工作，但也许会来。
我已经稍微更新了问题的 CSS，以显示我对截止的意思
@MW。根据新的更新查看这个更新的小提琴jsfiddle.net/Somnath_k/BuX93/1
这里可以直接带宽度
感谢您花这么多时间在这 :) 最后一个小提琴在 Firefox（可能还有 Chrome）中工作，但在 IE9 上它报告跨度宽度为 59 而不是 400 左右，即它只是返回span 的可见宽度。

【解决方案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/

希望对您有所帮助！

【讨论】：

该元素实际上已经存在于 DOM 中。问题是找到一种方法来获取 IE9 中的跨度宽度，即使部分跨度是隐藏的（因为父 div 有溢出：隐藏和空白：nowrap）

【解决方案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!");
}

【讨论】：