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

【问题标题】：Determine if an HTML element's content overflows确定 HTML 元素的内容是否溢出
【发布时间】：2010-09-13 17:11:04
【问题描述】：

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

【问题讨论】：

【解决方案1】：

另一种方法是将元素宽度与其父元素的宽度进行比较：

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

【讨论】：

子元素通常被包含或缩小以适应父元素。你如何解决这个问题？
@CWSites 如果您在谈论图像，请尝试使用object-fit: cover;
我问的不是图像，只是一个 DOM 元素，例如 div 或 span
可能是因为将width 或max-width 设置为100% 或-webkit-fill-available

【解决方案2】：

使用 jQuery 你可以做到：

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

如果需要，请更改为 .prop('scrollWidth') 和 .width()。

【讨论】：

【解决方案3】：

尝试将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

【讨论】：

【解决方案4】：

这是一个 javascript 解决方案（使用 Mootools），它将减小字体大小以适应 elHeader 的范围。

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

elHeader的CSS：

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

注意elHeader的包装器设置了elHeader的宽度。

【讨论】：

这与 HTML 元素溢出无关。减小字体大小也是一个可访问性问题。

【解决方案5】：

通常，您可以将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... 检测程序是我需要的，因为我玩溢出（隐藏/可见）
我在stackoverflow.com/questions/2023787/… 有一个类似的问题，我试图找出包含元素的哪些部分隐藏了溢出。
不知道会不会因为样式的短暂改变而产生短暂的闪烁？
+1。这适用于现代浏览器（至少包括 Chrome 40 和撰写本文时的其他当前版本的浏览器）。
在 MS Edge 中不起作用。有时内容没有溢出，但 clientWidth 和 scrollWidth 相差 1px。

【解决方案6】：

我认为这个答案并不完美。有时即使文本溢出，scrollWidth/clientWidth/offsetWidth 也是相同的。

这在 Chrome 中运行良好，但在 IE 和 Firefox 中不适用。

最后，我尝试了这个答案：HTML text-overflow ellipsis detection

它非常完美，在任何地方都能正常工作。所以我选择了这个，也许你可以试试，不会让你失望的。

【讨论】：

我建议删除或取消投票这个答案，因为它有一些缺陷。我一开始使用它，但它不能完美地与一些特殊的 css 样式配合使用。
文本溢出和HTML元素溢出是有区别的。最初的问题是关于 HTML 元素的。