我可以使用 JavaScript 来检查（不考虑滚动条）HTML 元素是否溢出了其内容？例如，一个小的、固定大小的长 div，overflow 属性设置为可见，元素上没有滚动条。
确定 HTML 元素的内容是否溢出
IT技术
javascript
html
css
2021-01-27 21:52:39
6个回答
通常，您可以将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 text-overflow ellipsis detection
它是完美的，适用于任何地方。所以我选择了这个，也许你可以试试，你不会失望的。
另一种方法是将元素宽度与其父元素的宽度进行比较：
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()如果需要的话。