IE 获得可见宽度，但不是溢出跨度的实际宽度答案

【问题标题】：IE get visible width but not real width of the overflowed spanIE 获得可见宽度，但不是溢出跨度的实际宽度
【发布时间】：2017-05-30 18:40:32
【问题描述】：

我有下一个代码

HTML

<table>
  <tbead>
    <tr>
       <td id="container">
         <span id="innerText">Some long text here</span>
       </td>....
    </tr>....
  <tbody>
</table>

CSS

container{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
max-width:100px;
}

JQUERY

var $span = $("#innerText");
var $spanWidth = $span.width(); //I also tried $span[0].scrollWidth, innerWidth, outerWidth
var $containerWidth = $("#container").width();
if($containerWidth<$spanWidth)
{
   //Do things
}

所以在 Chrome 中它像我想要的那样工作，它返回 span 元素的真实宽度并检测它不适合容器。但是在 IE 中，我尝试过返回可见的跨度宽度，所以它总是比容器小。有人有什么建议吗？

谢谢。

加法

id 不是很重要，因为我使用 jquery 全选。因此，列内部文本（“此处的文本非常长”）将显示为“非常...”。但是我需要知道“这里的文本很长”的长度，如果我在 Chrome 中使用 .width() 它可以工作，但在 IE 中它给我的长度是“非常长...”。

【问题讨论】：

现在我创建了一个解决方法：将 span 内容复制到隐藏的 div 并比较该 div 和容器的宽度。它仍然不完美，因为对于不同的浏览器有一些 +/-20 px 的差距。但这是我目前拥有的最佳解决方案。

标签： jquery html internet-explorer

【解决方案1】：

#innerText{display:inline-block}

var l=(container.offsetWidth-innerText.offsetLeft);

【讨论】：

对不起，那个没用。我认为说这一切都在表内并不重要，但看起来这也是一些关键的事情。所以我更新了我的问题。 id 不是很重要，因为我使用 jquery 来选择所有。因此，列内部文本（“此处非常长的文本”）将显示为“非常...”。但是我需要知道“这里的文本很长”的长度，如果我在 Chrome 中使用 .width() 它可以工作，但在 IE 中它给了我“非常长...”的长度。