Déterminez si le contenu d'un élément HTML déborde.

Question

Puis-je utiliser JavaScript pour vérifier (sans tenir compte des barres de défilement) si un élément HTML a débordé de son contenu ? Par exemple, un long div avec une petite taille fixe, la propriété overflow définie sur visible, et aucune barre de défilement sur l'élément.

Answer 1

Normalement, vous pouvez comparer les client[Height|Width] con scroll[Height|Width] afin de détecter cela... mais les valeurs seront les mêmes lorsque le débordement est visible. Donc, une routine de détection doit tenir compte de cela :

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Testé dans FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Answer 2

Essayez de comparer element.scrollHeight / element.scrollWidth a element.offsetHeight / element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 3

Une autre méthode consiste à comparer la largeur de l'élément avec celle de son parent :

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

Answer 4

Je ne pense pas que cette réponse soit parfaite. Parfois, la largeur de défilement, la largeur du client et la largeur de décalage sont les mêmes, même si le texte déborde.

Cela fonctionne bien dans Chrome, mais pas dans IE et Firefox.

Enfin, j'ai essayé cette réponse : Détection des ellipses dans le cadre du dépassement de texte HTML

Il est parfait et fonctionne bien partout. Je l'ai donc choisi, peut-être pouvez-vous essayer, vous ne serez pas déçu.

Answer 5

Avec jQuery, vous pourriez le faire :

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Changer pour .prop('scrollWidth') y .width() si nécessaire.