Comment puis-je afficher une info-bulle uniquement lorsque les points de suspension sont actifs en HTML ?

Détermination de l'activation des points de suspension pour l'affichage des info-bulles

En HTML, si le contenu dépasse la largeur spécifiée d'un élément, les points de suspension (...) peuvent automatiquement appliqué, désigné par un texte de débordement tronqué et remplacé par trois points. Cet article explique comment afficher une info-bulle uniquement lorsque les points de suspension sont actifs.

Arrière-plan

Considérez l'extrait HTML suivant :

<code class="html"><p>I have got a span with dynamic data in my page, with ellipsis style.</p>

<pre class="brush:php;toolbar:false">.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

Dans cet exemple, le contenu dans la plage "myId" sera mis à jour dynamiquement et le style points de suspension s'active lorsque le contenu dépasse la largeur spécifiée.

Ajout d'une info-bulle

Pour ajouter une info-bulle à cet élément, nous pouvons utiliser l'attribut "title":

<code class="html"><span id="myId" class="my-class" title="Full Content"></span></code>

Faire apparaître l'info-bulle uniquement avec des points de suspension

Cependant, nous souhaitons que l'info-bulle apparaisse uniquement lorsque le contenu est suffisamment long pour activer les points de suspension. Pour y parvenir, nous pouvons lier un écouteur d'événement mouseenter à l'élément et ajouter dynamiquement l'attribut "title" :

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

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});</code>

Dans ce code JavaScript, nous vérifions si la largeur de décalage de l'élément est inférieure à sa largeur de défilement. , indiquant que le contenu déborde. Si l'attribut "title" n'est pas encore défini, nous ajoutons alors le texte intégral de l'élément comme info-bulle. Cela garantit que l'info-bulle ne s'affiche que lorsque les points de suspension sont activés.

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!