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獲取可視寬度，但溢出跨度的不是真正的寬度

回答

相關問題