Maison > interface Web > tutoriel CSS > le corps du texte

Comment afficher les info-bulles uniquement lorsque le texte est de taille elliptique en HTML ?

Susan Sarandon
Libérer: 2024-11-05 21:06:03
original
402 Les gens l'ont consulté

How to Display Tooltips Only When Text is Ellipsized in HTML?

Affichage des info-bulles uniquement lorsque les points de suspension sont activés

En HTML, lorsque le texte dépasse la largeur spécifiée, il est tronqué avec des points de suspension ("..."). Ceci peut être réalisé en utilisant la propriété text-overflow définie sur points de suspension. Cependant, le navigateur ne prend pas en charge la détection du moment où les points de suspension sont appliqués.

Gestion personnalisée des événements avec JavaScript

Pour simuler ce comportement et afficher les info-bulles uniquement lorsque les points de suspension sont présents, voici une approche JavaScript :

<code class="javascript">$('.mightOverflow').bind('mouseenter', function() {
  var $this = $(this);

  if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
    $this.attr('title', $this.text());
  }
});</code>
Copier après la connexion

Ce code lie l'événement mouseenter aux éléments susceptibles de déborder. Il vérifie si la largeur visible de l'élément (offsetWidth) est inférieure à la largeur réelle de son contenu (scrollWidth) et s'il n'a pas d'attribut title. Si ces conditions sont remplies, il définit l'attribut title sur le contenu textuel de l'élément.

Cette technique vous permet d'afficher des info-bulles uniquement lorsque les points de suspension sont activés sans vous fier aux événements spécifiques du navigateur.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal