Comment puis-je obtenir des points de suspension alignés à gauche dans un débordement de texte à l'aide de CSS ?

Contrôle des points de suspension du texte aligné à gauche

Dans les cas où le texte déborde dans un conteneur, le comportement typique est que les points de suspension apparaissent sur le à droite, en tronquant le texte depuis la fin. Cependant, dans certains scénarios, il peut être souhaitable d'avoir les points de suspension à gauche, garantissant que les informations importantes restent visibles.

Une approche pour obtenir des points de suspension alignés à gauche consiste à utiliser CSS. L'extrait de code suivant utilise les propriétés direction, text-align et text-overflow :

p {
  white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

Dans cette solution, la propriété white-space empêche le retour à la ligne du texte, tandis que la propriété overflow définit le comportement de débordement. à masqué, garantissant que le contenu est tronqué lorsqu'il dépasse la largeur du conteneur. La propriété text-overflow spécifie explicitement l'utilisation de points de suspension pour la troncature.

La propriété width détermine l'espace maximum disponible pour le texte. La propriété direction définit la direction du texte de droite à gauche (rtl) et la propriété text-align définit l'alignement du texte à gauche. Cette combinaison de propriétés permet aux points de suspension d'apparaître à l'extrémité gauche du texte lorsqu'il est tronqué.

Bien que cette approche CSS uniquement fournisse une solution de contournement dans Firefox et Chrome, elle peut être confrontée à des limitations lorsqu'il s'agit de RTL mixtes. et le contenu LTR. La valeur de type débordement gauche spécifiée reste expérimentale et peut nécessiter un développement plus approfondi pour fournir le comportement souhaité dans divers scénarios.

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!