Comment obtenir des points de suspension de débordement de texte du côté gauche dans Safari ?

Ellipses de débordement de texte du côté gauche

Lorsque vous travaillez avec une liste de chemins longs, il peut être difficile de les afficher entièrement tout en garantissant que les informations importantes à droite restent visibles. Pour résoudre ce problème, vous souhaiterez peut-être implémenter des points de suspension de débordement de texte du côté gauche, qui tronqueraient le début du chemin tout en conservant sa fin.

Contrairement aux navigateurs comme Firefox et Chrome, Safari ne prend actuellement pas en charge cette fonctionnalité. en utilisant CSS seul. Cependant, une combinaison de propriétés CSS peut être utilisée comme solution de contournement.

Solution CSS :

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

Explication :

• espace blanc : nowrap empêche le texte de s'enrouler sur plusieurs lignes.
• débordement : caché masque la partie débordante du texte.
• text-overflow : les points de suspension déclenchent l'ajout de points de suspension lorsque le texte dépasse la largeur disponible.
• width spécifie la largeur maximale du conteneur de chemin.
• direction : rtl force la direction du texte de droite à gauche.
• text-align : gauche aligne le texte à gauche du conteneur, plaçant ainsi les points de suspension à gauche.

Exemple :

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

Cette solution de contournement CSS permet d'obtenir le résultat souhaité. effet d'afficher des points de suspension de débordement de texte sur le côté gauche, garantissant que les informations critiques sur la droite restent visibles, même pour les longs chemins.

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!