How to detect overflow in div element? [duplicate]

Question

How can I detect vertical text overflow in a div element?

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>

Fanchette

What do you mean by "detect" exactly? What do you want to do in reaction, show a scrollbar? – Mullion

I want to resize div on mouse hover if the text overflows but I sorted that out already so it wasn't part of the question. – Utile

Answer 1

You can easily do that by comparing scrollHeight with clientHeight, try the following:

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

For more information please take a look at: http://help.dottoro.com/ljbixkkn.php

Leninism

This doesn't work if the overflow rule on the div is 'visible', which is the default. Using Firefox 18. – Edytheee

It doesn't tell you what specific div is overflowing either. – Attack

The problem with this solution is that if the element is hidden ( or it's parent ) both return 0.. any workaround? – Bresee

If overflow is visible, the question is often moot. – Shrieval

Answer 2

A variation on Chamika's answer is to, in your actual html, have an inner and outer Div. The outer Div would have static height and width and overflow hidden. The inner Div only has the content and will stretch to the content.

You can then compare the height and width of the 2 Divs, without the need to dynamically add anything.

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

Baring

Answer 3

following jQuery plugin will alert the result.

CSS

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

To determine overflow in the width,

(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);

To determine overflow in the height,

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

Loredo

Not sure this is the most efficient or best way to check - what if there is script within that particular div, it would re-run it – Attack