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

Question

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

181

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

- andrei costache

我认为这个答案并不完美。有时候即使文本溢出，scrollWidth/clientWidth/offsetWidth也是相同的。这在Chrome中效果很好，但在IE和Firefox中却不行。最后，我尝试了这个答案：https://dev59.com/2Gsz5IYBdhLWcg3wrJwx 它非常完美，并且在任何地方都能正常工作。所以我选择了它，也许你可以试试，你不会失望的。 - zjalex

7个回答

22

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

注：这些链接包含有关 HTML 元素的宽度、高度和滚动宽度、滚动高度等方面的信息。

- Chris MacDonald

6

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

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

    return elemWidth > parentWidth
}

- Alynva

3

子元素通常被包含在父元素中或缩小以适应父元素。如何解决这个问题？ - CWSites

如果你在谈论图片，尝试使用 object-fit: cover;。 - Alynva

1

我不是在询问图像，只是DOM元素，比如div或span。 - CWSites

可能是因为width或max-width被设置为100％或-webkit-fill-available。 - Alynva

4

我不喜欢这些中的任何一个，所以我写了这个。非常好用！

function isOverflowY(element) {
  return element.scrollHeight != Math.max(element.offsetHeight, element.clientHeight)
}

- chad steele

3

我不认为这个答案是完美的。有时候即使文本溢出，scrollWidth/clientWidth/offsetWidth仍然是相同的。在Chrome中可以正常工作，但在IE和Firefox中无法正常工作。最后，我尝试了这个答案：HTML文本溢出省略号检测。它完美地在任何地方都能正常工作。所以我选择了这个答案，也许你也可以尝试一下，你不会失望的。

- zjalex

我建议删除或取消投票这个答案，因为它有一些缺陷。我最初使用它，但它不能与一些特殊的CSS样式完美地配合工作。 - zjalex

文本溢出和HTML元素溢出之间有区别。最初的问题涉及到HTML元素。 - CWSites

1

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

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

    console.log("element is overflowing");

} else {

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

}

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

- Agu Dondo

-4

这是一个使用Mootools的JavaScript解决方案，可以缩小字体大小以适应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的宽度。

- Paul V

这与HTML元素溢出无关。同时减小字体大小会涉及到可访问性问题。 - CWSites

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shog9 · Accepted Answer

通常，您可以比较client[Height|Width]和scroll[Height|Width]以便检测到此问题...但是当overflow为visible时，这些值将相同。因此，检测程序必须考虑到这一点：

// 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中进行过测试。