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

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

通常，您可以将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中进行了测试。

尝试比较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

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

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

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

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

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

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

    return elemWidth > parentWidth
}

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

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

    console.log("element is overflowing");

} else {

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

}

变化.prop('scrollWidth')和.width()如果需要的话。

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