检测元素是否溢出的最简单方法是什么?
我的用例是，我想限制某个内容框的高度为300px。如果内部内容比这高，我用溢出切断它。但如果它已满，我想显示一个'more'按钮，但如果没有，我不想显示该按钮。
是否有一种简单的方法来检测溢出，或者有更好的方法?
当前回答
jquery的替代答案是使用[0]键来访问原始元素，如:
if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){
其他回答
元素可以垂直、水平或同时进行溢出。如果DOM元素被覆盖，这个函数将返回一个布尔值:
function isOverflown(element) {
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
function isOverflown(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } var els = document.getElementsByClassName('demos'); for (var i = 0; i < els.length; i++) { var el = els[i]; el.style.borderColor = (isOverflown(el) ? 'red' : 'green'); console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown."); } .demos { white-space: nowrap; overflow: hidden; width: 120px; border: 3px solid black; } <div class='demos'>This is some text inside the div which we are testing</div> <div class='demos'>This is text.</div>
ES6例子:
const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
return scrollHeight > clientHeight || scrollWidth > clientWidth;
}
这是对我有用的jQuery解决方案。clientWidth等没有工作。
function is_overflowing(element, extra_width) {
return element.position().left + element.width() + extra_width > element.parent().width();
}
如果这不起作用，请确保元素的父元素具有所需的宽度(就个人而言，我必须使用parent().parent())。位置相对于父节点。我还包含了extra_width，因为我的元素(“标签”)包含的图像需要很短的时间来加载，但在函数调用期间，它们的宽度为零，破坏了计算。为了解决这个问题，我使用下面的调用代码:
var extra_width = 0;
$(".tag:visible").each(function() {
if (!$(this).find("img:visible").width()) {
// tag image might not be visible at this point,
// so we add its future width to the overflow calculation
// the goal is to hide tags that do not fit one line
extra_width += 28;
}
if (is_overflowing($(this), extra_width)) {
$(this).hide();
}
});
希望这能有所帮助。
像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度，并将其与容器的高度进行比较。如果大于，则可以在代码中添加“显示更多”按钮。
更新:增加了在容器顶部创建“Show More”按钮的代码。
下面是一个使用带有overflow:hidden和JQuery height()的包装器div来确定元素是否已溢出的方法，以测量包装器和内部内容div之间的差异。
outers.each(function () {
var inner_h = $(this).find('.inner').height();
console.log(inner_h);
var outer_h = $(this).height();
console.log(outer_h);
var overflowed = (inner_h > outer_h) ? true : false;
console.log("overflowed = ", overflowed);
});
来源:jsfiddle.net上的框架和扩展
如果你正在使用jQuery，你可能会尝试一个技巧:使外部div溢出:隐藏和内部div内容。然后使用.height()函数来检查内部div的高度是否大于外部div的高度。我不确定它是否会工作，但请尝试一下。
