Comment puis-je détecter le débordement de texte CSS à l'aide de JavaScript ?

Détection du débordement de texte avec des points de suspension

La propriété text-overflow en CSS permet de tronquer le texte lorsqu'il dépasse la largeur de son conteneur. Des points de suspension (...) s'affichent alors pour indiquer que le texte est coupé.

Détection de débordement

Pour détecter quels éléments d'une page Web ont leur texte tronqué , vous pouvez utiliser JavaScript :

function isEllipsisActive(e) {
    return (e.offsetWidth < e.scrollWidth);
}

Cette fonction prend un élément en entrée et renvoie vrai si sa largeur est inférieure à sa largeur de défilement, indiquant que son texte est débordement.

Exemple d'utilisation

Vous pouvez utiliser cette fonction pour vérifier l'état de débordement d'un élément, comme le suivant :

<div>
  <span>Normal text</span>
</div>
<div>
  <span>Long text that will be trimmed text</span>
</div>

console.log(isEllipsisActive(document.querySelector('span'))); // false (for the first div)
console.log(isEllipsisActive(document.querySelectorAll('span')[1])); // true (for the second div)

En utilisant cette fonction JavaScript, vous pouvez détecter dynamiquement les éléments avec du texte débordant et appliquer un style ou un comportement approprié en conséquence.

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!