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

是否可以使用JavaScript检查（与滚动条无关）HTML元素的内容是否溢出？例如，长div的大小固定且较小，溢出属性设置为visible，并且元素上没有滚动条。

#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 ...我认为检测例程是我所需要的，因为我在溢出时（隐藏/可见）播放

– andrei costache
08年9月27日在17:49

我在stackoverflow.com/questions/2023787/…上也有类似的问题，在这里我试图找出包含元素的哪些部分隐藏了溢出。

–生活
2010-1-7 21:27

我想知道随着样式的短暂改变，这是否会带来短暂的闪烁？

– Stijn de Witt
2012年11月22日12:37

+1。此功能适用于现代浏览器（从撰写本文时起，至少包括Chrome 40和其他当前版本的浏览器）。

– L0j1k
15年2月27日在19:07

在MS Edge中不起作用。有时内容不会溢出，但clientWidth和scrollWidth相差1px。

– Jesper
16 Dec 5'在12:21

#2 楼

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

http://developer.mozilla.org/en/DOM/element.offsetWidthhttp://developer.mozilla.org/en/DOM/element.offsetHeighthttp ：//developer.mozilla.org/en/DOM/element.scrollWidthhttp：//developer.mozilla.org/en/DOM/element.scrollHeight

#3 楼

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

这在Chrome浏览器中效果很好，但在IE和Firefox中效果不佳。

最后，我尝试了以下答案：HTML文本溢出省略号检测

它是完美的，并且在任何地方都可以正常使用。所以我选择了这个，也许您可以尝试，您不会失望的。

我建议删除或取消投票，因为它有一些缺陷。我最初使用它，但是它不能与某些特殊的CSS样式完美配合。

–zjalex
2015年4月17日在2:19

#4 楼

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

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

    return elemWidth > parentWidth
}

#5 楼

使用jQuery，您可以执行以下操作：

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

    console.log("element is overflowing");

} else {

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

}

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

#6 楼

这是一个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的宽度。

编程黑洞网