如何检测 div 元素中的溢出？答案

【问题标题】：How to detect overflow in div element?如何检测 div 元素中的溢出？
【发布时间】：2011-08-21 14:17:12
【问题描述】：

如何检测 div 元素中的垂直文本溢出？

CSS：

div.rounded {
   background-color:#FFF;
   height: 123px;
   width:200px;
   font-size:11px;
   overflow:hidden;
}

HTML：

<div id="tempDiv" class="rounded">
    Lorem ipsum dolor sit amet,
    consectetur     adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
</div>

【问题讨论】：

“检测”到底是什么意思？你想做什么反应，显示一个滚动条？
如果文本溢出，我想在鼠标悬停时调整 div 的大小，但我已经把它整理出来了，所以它不是问题的一部分。
类似的老问题，答案很好：stackoverflow.com/a/143889/573057

标签： javascript html css

【解决方案1】：

您可以通过比较 scrollHeight 和 clientHeight 轻松做到这一点，尝试以下操作：

<script type="text/javascript">
function GetContainerSize ()
{
    var container = document.getElementById ("tempDiv");
    var message = "The width of the contents with padding: " + container.scrollWidth + "px.\n";
    message += "The height of the contents with padding: " + container.scrollHeight + "px.\n";

    alert (message);
}
</script>

更多信息请关注：http://help.dottoro.com/ljbixkkn.php

【讨论】：

如果 div 上的溢出规则是“可见”，这是默认的，这不起作用。使用 Firefox 18。
它也没有告诉你哪个特定的 div 溢出了。
这个解决方案的问题是，如果元素被隐藏（或者它是父元素）都返回 0.. 任何解决方法？

【解决方案2】：

Chamika 的答案的一个变体是，在您的实际 html 中，有一个内部和外部 Div。外部 Div 将具有静态高度和宽度并隐藏溢出。内部的 div 只有内容，会拉伸到内容。

然后您可以比较 2 个 Div 的高度和宽度，而无需动态添加任何内容。

<div id="tempDiv" class="rounded">
    <div class="content">
        Lorem ipsum dolor sit amet,
        consectetur     adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
    </div>
</div>

【讨论】：

【解决方案3】：

跟随jQuery插件会提醒结果。

CSS

#tempDiv{
    height:10px;
    overflow:hidden;
}

判断宽度是否溢出，

(function($) {
    $.fn.isOverflowWidth = function() {
        return this.each(function() {
            var el = $(this);
            if (el.css("overflow") == "hidden") {
                var text = el.html();
                var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').width('auto').height(el.height());
                el.after(t);    
                function width() {
                    return t.width() > el.width();
                };
                alert(width());
            }
        });
    };
})(jQuery);

判断溢出的高度，

(function($) {
    $.fn.isOverflowHeight = function() {
        return this.each(function() {
            var el = $(this);
            if (el.css("overflow") == "hidden") {
                var text = el.html();
                var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').height('auto').width(el.width());
                el.after(t);

                function height() {
                    return t.height() > el.height();
                };
                alert(height());
            }
        });
    };
})(jQuery);

http://jsfiddle.net/C3hTV/

【讨论】：

不确定这是最有效或最好的检查方法 - 如果该特定 div 中有脚本，它会重新运行它