獲取文本節點的寬度

（JS-修改）HTML的一點可能是這樣的：獲取文本節點的寬度

<div style="width: 50px;">1,234,567</div>

如何檢測，如果文本節點比容器寬？

來源

2012-08-14 Niet the Dark Absol

我猜它會涉及克隆文本節點，並丟棄將其轉換爲沒有固定寬度的容器，或者如果您可以更改標記，請將文本內容包裝在''中，然後使用其寬度。 – 2012-08-14 19:39:14

[如何檢測div元素溢出？]（http://stackoverflow.com/questions/7138772/how-to-detect-overflow-in-div-element）可能的重複。只需使用'scrollWidth'而不是'scrollHeight' – 2012-08-14 19:39:31

@MattBall這似乎很有用，但我沒有在元素上隱藏溢出。我需要補充一點嗎，還是會在沒有溢出設置的情況下運行？ – 2012-08-14 19:52:38

正如啓發How to detect overflow in div element?：

<!-- Overflowing --> 
<div style="width: 50px;">1,234,567</div> 

<!-- Not overflowing --> 
<div>1,234,567</div>

的JavaScript（jQuery的無）來檢測：

var divs = document.getElementsByTagName('div'); 
var i, div, overflowing; 

for (i=0; i<divs.length; i++) { 
    div = divs[i]; 
    overflowing = div.offsetWidth < div.scrollWidth; 
    console.log(overflowing); 
}

http://jsfiddle.net/mattball/pYj5P/

來源

2012-08-14 20:22:14

結果在Firefox中都是'false'，正如我想象的那樣。由於允許明顯溢出，因此不會滾動任何內容。 – 2012-08-14 20:45:45

@amnotiam這是我把邊框放進去的原因之一。在Chrome中，第一個div的右邊框與「6」相交：http://i.stack.imgur.com/N3MrS.png，相應地，代碼打印只有第一個div纔是真的。 – 2012-08-14 20:52:47

是的，我明白爲什麼邊界在那裏。我使用[背景替代]（http://jsfiddle.net/7b3nk/）使它更容易看到。我的觀點是Firefox給出了不同的結果。該代碼爲兩個div輸出「false」，因爲當可見溢出時，「scrollWidth」等於「offsetWidth」。我假設Firefox的結果是正確的，因爲當它的溢出可見時，內容不能滾動。 – 2012-08-14 20:56:44

獲取文本節點的寬度

回答

相關問題