Comment détecter de manière fiable le contenu débordant dans les éléments HTML ?

Détection du contenu débordé dans les éléments HTML

Déterminer si le contenu d'un élément HTML a dépassé ses limites peut être une tâche courante lors de la conception de pages Web. Cependant, la méthode standard de comparaison des dimensions client aux dimensions de défilement ne fonctionne pas toujours lorsque le débordement est défini sur visible, car les valeurs seront identiques.

Pour résoudre ce problème, la fonction JavaScript fournie modifie temporairement le CSS. paramètre de débordement sur caché. Cela nous permet de détecter avec précision si l’élément dépasse réellement ses limites, verticalement ou horizontalement. Voici le code :

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

Cette fonction a été testée dans les principaux navigateurs, notamment Firefox, Internet Explorer et Chrome, garantissant qu'elle fonctionne de manière cohérente sur toutes les plates-formes. En tirant parti de cette technique, vous pouvez désormais vérifier sans effort si le contenu d'un élément HTML déborde de l'espace alloué, quelle que soit la visibilité de la barre de défilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!