Comment puis-je afficher les points de suspension de débordement de texte sur le côté gauche ?

Ellipses de débordement de texte sur le côté gauche :

Vous pouvez rencontrer un scénario dans lequel vous avez une liste de chemins ou des valeurs de texte qui dépassent la largeur d'affichage. Pour résoudre ce problème, vous souhaiterez peut-être implémenter la propriété text-overflow pour tronquer le texte. Supposons cependant que les informations critiques se trouvent à la fin du texte. Dans ce cas, vous préféreriez que les points de suspension apparaissent sur le côté gauche, garantissant que le contenu le plus à droite reste visible.

La solution à ce problème se trouve dans le violon JavaScript fourni. Ici, une combinaison de propriétés de direction, d'alignement de texte et de débordement de texte est utilisée. Il convient de noter que selon la documentation MDN, il pourrait y avoir une future option pour spécifier le positionnement des points de suspension sur la gauche en utilisant le type de débordement. Cependant, cette fonctionnalité est toujours considérée comme expérimentale.

1. Direction : Cette propriété ajuste la direction du texte de droite à gauche (RTL) en utilisant direction:rtl;.
2. Text-align : La propriété text-align aligne le texte de son élément parent sur le à gauche.
3. Text-overflow : La propriété text-overflow est définie sur points de suspension. Cela tronque efficacement le texte et affiche des points de suspension si le texte s'étend au-delà de la largeur de l'élément.

Voici le violon JS fourni pour une illustration plus approfondie :

JavaScript Violon

CSS :

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

HTML :

<p>
  first > second > third<br />
  second > third > fourth > fifth > sixth<br />
  fifth > sixth > seventh > eighth > ninth
</p>

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!