IE获取可视宽度，但溢出跨度的不是真正的宽度

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中它给了我“非常低”的长度。

来源

2017-05-29 maximelian1986

现在我创建了一个解决方法：将跨度内容复制到隐藏的div并比较div和容器宽度。它仍然不完美，因为不同浏览器有+/- 20像素的差距。但这是我现在最好的解决方案。 – maximelian1986

#innerText{display:inline-block} 

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

来源

2017-05-29 21:11:00

对不起，那个没有工作。我认为这不是重要的，这是全部内幕，但看起来也是一些关键的事情。所以我更新了我的问题。该ID不是很重要，因为我使用jQuery来选择所有。因此，列内部文本（“非常长的文本在这里”）将显示为“非常低...”。但是我需要知道这里的“非常长的文本”的长度，如果我在Chrome中使用.width（），它在工作，但是在IE中它给了我“非常低”的长度。 – maximelian1986

IE获取可视宽度，但溢出跨度的不是真正的宽度

回答

相关问题