如何获取网页中元素的溢出宽度

Posted 2023-02-21

【中文标题】如何获取网页中元素的溢出宽度

【英文标题】：How to get the overflowed width of an element in a webpage

【发布时间】：2010-10-20 08:42:44

【问题描述】：

我有两个这样的 div

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

我正在动态更新孩子的内容并使用 jQuery 滚动它。我希望能够找到孩子的宽度，以便知道何时停止滚动。问题在于，一旦出现溢出内容，孩子的实际宽度甚至比屏幕还要宽（当前测试内容似乎约为 2500 像素）。元素的边框（如果设置了它）没有延伸到内容的实际宽度，文本会溢出可见边框。

使用 jQuerys $('#child').width 、clientWidth、scrollWidth（感谢 bobince）和 offsetWidth 属性都最大为 1024px（这是我的显示器的宽度）。有谁知道有什么方法可以找出元素内容包括溢出的宽度？如果有帮助，我正在构建的应用程序将在 kiosk 类型的环境中运行，因此仅 Firefox（甚至是夜间版本）的解决方案就可以了。

更新：scrollWidth关于父作品，我应该仔细阅读，再次感谢bobince。

【参考方案1】：

使用 JQuery，你可以做到：

$('#parent')[0].scrollWidth

【讨论】：

从 jQuery 元素数组中取出第零个元素返回 DOM 节点，这与上面的答案（document.getElementById('parent').scrollWidth）相同。好处是scrollWidth 可以在没有 jQuery 的情况下巧妙地完成。

【参考方案2】：

document.getElementById('parent').scrollWidth

scrollWidth 是一个 IE 扩展，在历史上它的支持不如 offsetWidth 好。然而，现在所有现代桌面浏览器都包含它。

【讨论】：

恐怕 scrollWith 也会达到 1024px 的最大值。不过感谢您的建议。

在 FF3 中为我工作 — 发布一个不起作用的完整代码示例 ？检查您查看的是“父”滚动宽度，而不是“子”，并且太宽的内容不会在 1024 处自然换行（或使用“空白：不换行”来阻止它）。最后检查语法 — 在您的示例中，规则之间有一个冒号而不是分号。

啊哈，家长，错过了那一点，它有效！非常感谢。

先生，你是个传奇！