Comment détecter le débordement dans l'élément div?

Question

Comment détecter un débordement de texte vertical dans un élément 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>

Answer 1

Vous pouvez facilement le faire en comparant scrollHeight avec clientHeight, essayez ce qui suit :

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

Pour plus d'informations, veuillez consulter : http://help.dottoro.com/ljbixkkn.php

Answer 2

Une variante de la réponse de Chamika consiste, dans votre code HTML actuel, à avoir une division interne et externe. La division extérieure aurait une hauteur et une largeur statiques et un débordement caché. Le Div interne n'a que le contenu et s'étendra jusqu'au contenu.

Vous pouvez ensuite comparer la hauteur et la largeur des 2 Divs, sans avoir besoin d'ajouter quoi que ce soit de manière dynamique.

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

Answer 3

Le plugin jQuery suivant alertera le résultat.

CSS

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

Pour déterminer le débordement dans la largeur,

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

Pour déterminer le débordement en hauteur,

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