50

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>
Nachshon Schwartz
  • 15,289
  • 20
  • 59
  • 98
Vladimir Perković
  • 1,351
  • 3
  • 12
  • 30

3 Answers3

56

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

MartinStettner
  • 28,719
  • 15
  • 79
  • 106
DivinesLight
  • 2,398
  • 2
  • 24
  • 30
6

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>
Josh Russo
  • 3,080
  • 2
  • 41
  • 62
4

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/

Chamika Sandamal
  • 23,565
  • 5
  • 63
  • 86
  • 5
    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 – NoBugs Jul 05 '15 at 02:03