检测元素是否溢出的最简单方法是什么?

我的用例是,我想限制某个内容框的高度为300px。如果内部内容比这高,我用溢出切断它。但如果它已满,我想显示一个'more'按钮,但如果没有,我不想显示该按钮。

是否有一种简单的方法来检测溢出,或者有更好的方法?


当前回答

jquery的替代答案是使用[0]键来访问原始元素,如:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){

其他回答

如果你正在使用jQuery,你可能会尝试一个技巧:使外部div溢出:隐藏和内部div内容。然后使用.height()函数来检查内部div的高度是否大于外部div的高度。我不确定它是否会工作,但请尝试一下。

jquery的替代答案是使用[0]键来访问原始元素,如:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){

像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度,并将其与容器的高度进行比较。如果大于,则可以在代码中添加“显示更多”按钮。

更新:增加了在容器顶部创建“Show More”按钮的代码。

你应该考虑的另一个问题是JS不可用。考虑渐进增强或优雅降级。我建议:

默认添加“更多按钮” 默认添加溢出规则 隐藏按钮,并在JS中进行CSS修改后比较元素。scrollHeight到element.clientHeight

这是对我有用的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();
    }
});

希望这能有所帮助。