检测元素是否溢出的最简单方法是什么?
我的用例是,我想限制某个内容框的高度为300px。如果内部内容比这高,我用溢出切断它。但如果它已满,我想显示一个'more'按钮,但如果没有,我不想显示该按钮。
是否有一种简单的方法来检测溢出,或者有更好的方法?
检测元素是否溢出的最简单方法是什么?
我的用例是,我想限制某个内容框的高度为300px。如果内部内容比这高,我用溢出切断它。但如果它已满,我想显示一个'more'按钮,但如果没有,我不想显示该按钮。
是否有一种简单的方法来检测溢出,或者有更好的方法?
当前回答
像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度,并将其与容器的高度进行比较。如果大于,则可以在代码中添加“显示更多”按钮。
更新:增加了在容器顶部创建“Show More”按钮的代码。
其他回答
像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度,并将其与容器的高度进行比较。如果大于,则可以在代码中添加“显示更多”按钮。
更新:增加了在容器顶部创建“Show More”按钮的代码。
元素可以垂直、水平或同时进行溢出。如果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;
}
setTimeout(function(){
isOverflowed(element)
},500)
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.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();
}
});
希望这能有所帮助。
使用js检查孩子的offsetHeight是否大于父母..如果是,使父溢出滚动/隐藏/自动你想要的,并在更多div上显示:block ..