Comment implémenter des points de suspension dans un texte tronqué avec des éléments redimensionnables ?

Insertion de points de suspension dans un texte tronqué

Pour implémenter des points de suspension au milieu d'un texte dans un élément redimensionnable, envisagez l'approche suivante :

Étape 1 : Déclaration d'attribut de données

En HTML, incluez le texte intégral dans un attribut data-* personnalisé, tel que :

Étape 2 : Écouteurs d'événements

Attribuer écouteurs d'événements à charger et à redimensionner en fonction JavaScript.

Étape 3 : Fonction points de suspension

Utilisez la fonction JavaScript suivante pour gérer l'insertion de points de suspension :

<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, 20 et 10) pour différentes troncatures.

Étape 4 : Insertion InnerHTML

Dans la fonction d'écoute d'événement, lisez les données d'origine attribut et placez-le dans le innerHTML de la balise span :

<code class="javascript">mySpan.innerHTML = start_and_end(mySpan.getAttribute("data-original"));</code>

Étape 5 : Info-bulle (facultatif)

Pour fournir une info-bulle aux utilisateurs avec la chaîne complète , ajoutez une balise abbr avec l'attribut title :

...

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!