Comment implémenter des points de suspension dans du texte pour un élément redimensionnable ?

Ellipses dans le texte : atteindre le style Mac

Défi :

Mettre en œuvre les points de suspension ( " ...") au milieu du texte au sein d'un élément redimensionnable. Les points de suspension doivent disparaître lorsque la largeur de l'élément correspond à la largeur du texte complet.

Solution :

1. Ajouter un attribut de données au HTML :

   Dans le code HTML, incluez la valeur du texte intégral dans un attribut data-* personnalisé, tel que :

   <span data-original="your string here"></span>

   Copier après la connexion

2. Écouteurs d'événements JavaScript :

   Ajoutez des écouteurs d'événements au chargement et redimensionnez les événements de l'élément. Ces écouteurs doivent déclencher une fonction JavaScript qui :

   • Récupérer le texte original de l'attribut data-*
   • Placer le texte dans le innerHTML de l'élément span

3. Fonction points de suspension :

   Créez une fonction points de suspension qui coupe le texte s'il dépasse une certaine longueur. Par exemple :

   <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>

   Copier après la connexion

   Personnalisez la longueur du texte et les valeurs de position selon vos besoins.

4. Info-bulle pour le texte intégral :

   Pour une meilleure accessibilité, pensez à ajouter une balise abbr sur les points de suspension avec une info-bulle qui affiche le texte intégral :

   <code class="html"><abbr title="full string">...</abbr></code>

   Copier après la connexion

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!