Comment puis-je implémenter la troncature des points de suspension dans un élément de texte redimensionnable ?

Troncation des points de suspension dans le redimensionnement du texte

Tronquer le texte avec des points de suspension ("...") au milieu du contenu peut améliorer la lisibilité lorsque Les éléments de l'interface utilisateur ont des largeurs variables. Atteindre cet effet présente un défi car les points de suspension doivent disparaître lorsque le texte est affiché dans son intégralité.

Pour implémenter les points de suspension dans un élément redimensionnable :

1. Utilisez un attribut de données personnalisé :

   • En HTML, attribuez le texte intégral à un attribut de données personnalisé :

2. Définir les écouteurs d'événements :

   • Ajouter des écouteurs d'événements de chargement et de redimensionnement qui déclenchent une fonction JavaScript pour remplir le HTML interne du balise span avec le texte original stocké dans l'attribut data.

3. Fonction Ellipsis :

   • Définir un Fonction JavaScript (par exemple, "start_and_end") pour tronquer le texte :

     <code class="javascript">function start_and_end(str) {
       if (str.length > 35) {
         return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
       }
       return str;
     }</code>

   • Ajustez les valeurs (par exemple, 35, 20, 10) selon vos besoins pour différents objets et polices.

4. Interpolation dynamique :

   • Envisagez d'utiliser l'interpolation dynamique pour déterminer le nombre approprié de caractères à afficher, en fonction de la taille de la police et de la largeur de l'élément. .

5. Accessibilité des info-bulles :

   • Ajoutez une balise abbr aux points de suspension pour activer une info-bulle avec le texte intégral lorsque survolé.

En mettant en œuvre ces étapes, vous pouvez efficacement tronquer le texte avec des points de suspension au milieu d'un élément de texte, en vous assurant qu'il disparaît lorsque l'élément est étiré au maximum. largeur du texte.

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!