获取文本节点的宽度答案

【问题标题】：Getting the width of a text node获取文本节点的宽度
【发布时间】：2012-08-11 04:05:45
【问题描述】：

一些（JS 修改的）HTML 可能如下所示：

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

如何检测文本节点是否比容器宽？

【问题讨论】：

我猜这将涉及克隆文本节点，并将其放入没有固定宽度的容器中，或者如果您可以更改标记，请将文本内容包装在<span>，并改用它的宽度。
How to detect overflow in div element? 的可能副本。只需使用scrollWidth 而不是scrollHeight
@MattBall 这似乎很有用，但我没有隐藏元素溢出。我是否必须添加它，或者它是否可以在没有溢出设置的情况下工作？
它可以在没有overflow: hidden 的情况下工作。 jsfiddle.net/mattball/pYj5P
哦，那太好了。如果你能做出这样的回答，我很乐意接受。

标签： javascript width

【解决方案1】：

受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/

【讨论】：

结果是false 在 Firefox 中的两种情况，正如我想象的那样。因为它被允许明显溢出，所以不会有任何东西可以滚动。
@amnotiam 这就是我放入边框的部分原因。使用 Chrome，第一个 div 的右边框穿过 6：i.stack.imgur.com/N3MrS.png，相应地，代码打印为 true仅限第一个 div。
是的，我明白为什么会有边界。我使用background instead 让它更容易看到。我的观点是 Firefox 给出了不同的结果。代码为两个 div 打印 false，因为当溢出可见时，scrollWidth 等于 offsetWidth。我假设 Firefox 结果是正确的，因为当内容溢出可见时无法滚动。