Question

我有下一个代码

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来选择所有。因此，列内部文本（＆＃34;非常长的文本和＃34;）将显示为＆＃34;非常...＆＃34;。但是我需要知道这篇文章的长度和＃34;这里有很长的文字＆＃34;如果我在Chrome中使用.width（）它可以正常工作，但在IE浏览器中它给我的长度非常低......＆＃34;。

Answer 1

#innerText{display:inline-block}

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

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

1 个答案: