Как обнаружить переполнение в элементе div?

Ответ 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

Ответ 2

следующий плагин 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/

Ответ 3

Вариант ответа Чамики заключается в том, что в вашем фактическом html есть внутреннее и внешнее Div. Внешнее Div будет иметь статическую высоту, ширину и переполнение. Внутреннее Div имеет только контент и будет растягиваться до содержимого.

Затем вы можете сравнить высоту и ширину 2 Divs, без необходимости динамически добавлять что-либо.

<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>