Javascript Girl
  1. Javascript Girl
  3. Comment détecter le débordement dans l'élément div?
Intereting Posts
Quelle est la meilleure façon de sérialiser des objets JavaScript en XML? Calculer les disponibilités d'une ressource Angulaire: Valider plusieurs champs dépendants Empêcher le défilement du navigateur sur HTML5 History popstate Le bouton HTML ne clique pas même lorsqu'il est concentré et que les règles CSS entrent en jeu Angulaire: lier des objets à <select> WIKI: Comment utiliser Lime (comment utiliser le compilateur de fermeture avec les bibliothèques de tiers (fermeture) Comment puis-je éviter la restriction CORS pour le web audio api? WebStorm JS Libraries TypeScript Community Stubs ne figurant pas la liste Comment pouvons-nous empêcher le téléchargement de fichier type .exe sur un site Web? JQuery.get () – Utilisations pratiques? Je souhaite arrêter la demande du navigateur, lorsque l'utilisateur clique sur un bouton de l'interface utilisateur, comme bouton d'arrêt sur le navigateur Dans JavaScript, comment puis-je utiliser regex pour correspondre à moins que les mots figurent dans une liste de mots exclus? Javascript – valeur de changement de combobox de l'autre combobox Jquery for loop écrit html après chaque troisième itération de la boucle

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

Comment puis-je détecter le 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>

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

Le plugin jQuery suivant va alerter 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 dans la 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/

Une variation de la réponse de Chamika consiste à, dans votre html réel, avoir une Div intérieure et extérieure. La Div extérieure aurait une hauteur et une largeur statiques et un débordement caché. La division intérieure n'a que le contenu et s'étend au contenu.

Vous pouvez ensuite comparer la hauteur et la largeur des 2 divs, sans avoir à ajouter 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>