获取文本节点的宽度

（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

获取文本节点的宽度

回答

相关问题