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

136

Puis-je utiliser JavaScript pour vérifier (indépendamment 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é de débordement définie sur visible et aucune barre de défilement sur l'élément.

javascript html css Barett
la source

Réponses:

217

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

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

Shog9
la source
merci Shog9 ... la routine de détection est, je pense, ce dont j'avais besoin, car je joue avec le débordement (caché / visible)
J'ai une question similaire sur stackoverflow.com/questions/2023787/… où j'essaie de déterminer quelles parties de l'élément contenant ont un débordement caché.
slolife
2
Je me demande si cela va donner un petit scintillement lorsque le style est brièvement changé?
Stijn de Witt
3
+1. Cela fonctionne sur les navigateurs modernes (y compris au moins Chrome 40 et les autres navigateurs de la version actuelle du moment de la rédaction de cet article).
L0j1k
1
Ne fonctionne pas dans MS Edge. Parfois , le contenu ne déborde pas , mais clientWidthet scrollWidthdiffère par 1px.
jesper
2

Je ne pense pas que cette réponse soit parfaite. Parfois, les paramètres scrollWidth / clientWidth / offsetWidth sont identiques 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 points de suspension de dépassement de texte HTML

C'est parfait et fonctionne bien n'importe où. Alors je choisis ceci, peut-être que vous pouvez essayer, vous ne décevrez pas.

Zjalex
la source
Je suggère de supprimer ou de ne pas voter cette réponse, car elle présente un défaut. Je l'utilise au début, mais cela ne peut pas fonctionner parfaitement avec un style css spécial.
zjalex
1

Une autre façon est de comparer la largeur de l'élément avec la largeur de son parent:

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

    return elemWidth > parentWidth
}
Alisson Nunes
la source
0

Avec jQuery, vous pouvez faire:

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

    console.log("element is overflowing");

} else {

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

}

Remplacez .prop('scrollWidth')et .width()si nécessaire.

Agu Dondo
la source
-2

Il s'agit d'une solution javascript (avec Mootools) qui réduira la taille de la police pour s'adapter aux limites d'elHeader. 

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

Le CSS d'elHeader:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Notez que le wrapper de elHeader définit la largeur de elHeader.

user945389
la source