如何判斷一個元素有多少像素被溢出中斷：隱藏在父級上

<div class="parent" style="width: 50px; overflow: hidden;"> 
    <div class="child" style="white-space: nowrap;">Some string of text wider than 50 pixels</div> 
</div>

.parent和.child報告寬度均爲50px，但.child應該超過50像素。有沒有一種方法可以確定一個子元素溢出父元素的程度？如何判斷一個元素有多少像素被溢出中斷：隱藏在父級上

例如如果.child是位置的話：絕對的，它有多寬，沒有實際定位：絕對？

來源

2012-09-14 aperture

如果您提供了使用什麼方法獲取元素的寬度，它會有幫助嗎？ – Ian

對不起。使用$ .width（） – aperture

您想知道滾動寬度。例如，http://jsfiddle.net/y8uZe/1

document.getElementById("child").scrollWidth;

編輯：肯定看起來像某種錯誤的在Firefox不得不做的空白：NOWRAP。

在這個小提琴看看：

http://jsfiddle.net/y8uZe/2

你可以清楚地看到這裏scrollHeight屬性是如何給你正確的價值，並scrollWidth實際上是給予正確的價值，以及因爲文本換行。但是當你告訴div不要包裝那些文本時，會發生奇怪的事情。

無論如何。一些瀏覽器有一個錯誤。無論是Safari/IE/Chrome還是Opera/Firefox。由於Opera總是有漏洞，我敢打賭它是錯誤的。 :)

此外，當我從http://www.quirksmode.org/dom/w3c_cssom.html讀取定義時，scrollWidth絕對是使用的正確屬性：「整個內容字段的寬度和高度，包括當前隱藏的部分」。

最後一次編輯：如果更改內部div以顯示：表格。它解決了這個問題。你可能會也可能不會這樣做，這取決於你的CSS，但至少很好知道。示例：http://jsfiddle.net/y8uZe/3/

來源

2012-09-14 03:40:47 aquinas

顯然不是，因爲警報仍然顯示「50px」，所以應該比這更多... – Ian

@ianpgall：我在Chrome上獲得了'278px'。 – Blender

我在Mac/Firefox上得到「50px」 – Ian

如何判斷一個元素有多少像素被溢出中斷：隱藏在父級上

回答

相關問題