确定 HTML 元素的内容是否溢出

Question

我可以使用 JavaScript 来检查（不考虑滚动条）一个 HTML 元素是否溢出了它的内容吗？例如，一个小而固定大小的长 div，溢出属性设置为可见，并且元素上没有滚动条。

原文由 andrei costache 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常，您可以将 client[Height|Width] 与 scroll[Height|Width] 进行比较，以检测到这一点…但是当溢出可见时，值将相同。因此，检测例程必须考虑到这一点：

 // Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

在 FF3、FF40.0.2、IE6、Chrome 0.2.149.30 中测试。

原文由 Shog9 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试比较 element.scrollHeight / element.scrollWidth 到 element.offsetHeight / element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetHeight

http://developer.mozilla.org/en/DOM/element.scrollWidth

http://developer.mozilla.org/en/DOM/element.scrollHeight

原文由 Chris MacDonald 发布，翻译遵循 CC BY-SA 4.0 许可协议