Comment obtenir des points de suspension alignés à gauche dans les fils d'Ariane avec CSS ?

Ellipses de texte alignées à gauche dans les fils d'Ariane

Dans de nombreuses applications, les fils d'Ariane sont utilisés pour afficher des chemins de navigation hiérarchiques. Lorsque les chemins deviennent trop longs pour s'afficher confortablement dans leurs éléments parents, text-overflow: ellipsis peut être utilisé pour tronquer le texte. Cependant, cette troncature se produit généralement sur le côté droit de la chaîne, masquant potentiellement des informations importantes.

Solution CSS uniquement

Pour obtenir des points de suspension alignés à gauche, les propriétés CSS tels que la direction, l'alignement du texte et le débordement de texte peuvent être utilisés. Par exemple, considérons l'extrait suivant (adapté du jsFiddle fourni) :

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

Comment ça marche

• white-space: nowrap; empêche les espaces d'envelopper le texte, garantissant que les traces restent sur une seule ligne.
• overflow : caché ; masque tout texte débordant, y compris les points de suspension.
• text-overflow : points de suspension ; tronque le texte et ajoute des points de suspension à la fin.
• largeur : 170 px ; définit la largeur maximale du sentier.
• direction : rtl ; force le texte à s'afficher de droite à gauche (sens inversé).
• text-align : left ; aligne le texte à gauche dans la largeur donnée.

Solution JS (non disponible dans la réponse fournie)

Bien que non explicitement demandée, une solution JS peut offrir une flexibilité supplémentaire, en particulier dans la gestion des contenus mixtes RTL et LTR. Une approche consiste à utiliser la propriété text-overflow-mode, mais avec certaines mises en garde et limitations :

document.querySelectorAll("p").forEach((p) => {
  p.style.textOverflowMode = "clip";
  p.style.direction = "rtl";
  p.style.textAlign = "left";
});

Considérations

Bien que cette approche réponde au problème spécifique décrit dans la question, il est important de noter les inconvénients potentiels :

• Tous les navigateurs ne prennent pas entièrement en charge le propriété text-overflow-mode.
• Certains navigateurs peuvent présenter des bizarreries de rendu, en particulier lors du mélange de contenu RTL et LTR.

Malgré ces limitations, les solutions fournies offrent des moyens pratiques de résoudre le problème. défi des points de suspension alignés à gauche dans les fils d'Ariane, garantissant que les informations importantes restent accessibles.

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!