Comment puis-je détecter le débordement de contenu dans les éléments HTML ?

Détection du débordement de contenu dans les éléments HTML

Dans les situations où le contenu d'un élément s'étend au-delà de la taille désignée, il devient crucial de déterminer si le l’élément déborde. Ceci est particulièrement utile pour implémenter des fonctionnalités telles que l'affichage d'un bouton supplémentaire lorsque le contenu est débordé.

La fonction fournie, isOverflyn(element), offre une approche simple pour cette tâche. Il évalue scrollHeight et scrollWidth d'un élément par rapport à ses clientHeight et clientWidth. Si l'une de ces valeurs dépasse ses homologues, cela indique que l'élément déborde.

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

Cette fonction peut être utilisée dans diverses applications, notamment :

1. Ajustement automatique de la taille de l'élément en fonction de la longueur du contenu.
2. Affichage d'indicateurs de débordement (par exemple, barres de défilement ou boutons).
3. Amélioration de l'expérience utilisateur en fournissant un contexte supplémentaire lorsque le contenu est tronqué.

L'exemple de code suivant illustre l'utilisation de la fonction isOverflyn :

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}

CSS peut être utilisé pour styliser les éléments de démonstration objectifs :

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML :

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

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!