Comment implémenter des points de suspension dans le texte pour maintenir la présence au milieu des fluctuations de largeur ?

Ellipses dans le texte : maintenir la présence au milieu des fluctuations de largeur

Dans le domaine de la conception Web, le besoin se fait sentir d'afficher des ellipses (".. .") dans un texte pouvant s'étendre sur différentes largeurs. Cela pose un défi pour obtenir le comportement souhaité où les points de suspension disparaissent lorsque la largeur du texte s'adapte à la chaîne complète.

Pour résoudre ce problème, une approche personnalisée utilisant JavaScript et HTML peut être mise en œuvre. Au sein de l'élément HTML contenant le texte, la chaîne complète peut être affectée à un attribut de données, tel que :

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

Une fois la page chargée, une fonction JavaScript peut être déclenchée pour récupérer la chaîne d'origine à partir des données. et placez-le dans le code HTML interne de la balise span. Voici un exemple de fonction 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>

Cette fonction tronque la chaîne à une longueur spécifique (ajustez si nécessaire en fonction de la taille de la police et de l'espacement souhaité) et insère les points de suspension au milieu.

Lorsque l'élément est redimensionné, l'écouteur d'événement de redimensionnement peut déclencher la fonction points de suspension pour conserver le comportement souhaité. Si nécessaire, les paramètres de la fonction peuvent être rendus dynamiques pour prendre en charge différents objets et longueurs de texte.

Pour garantir l'accessibilité dans tous les navigateurs, il est recommandé d'incorporer une balise abbr dans les points de suspension pour fournir une info-bulle qui affiche la chaîne complète. :

<abbr title="simple tool tip">something</abbr>

En intégrant cette approche basée sur JavaScript, les points de suspension peuvent apparaître et disparaître de manière transparente à mesure que la largeur de l'élément fluctue, garantissant un affichage de texte visuellement attrayant et fonctionnel dans des conceptions réactives.

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!