Comment afficher le texte débordant à gauche dans un conteneur ?

Affichage du contenu débordant vers la gauche

Lorsque vous travaillez avec du texte qui dépasse la largeur spécifiée d'un conteneur, il est essentiel de gérer efficacement le débordement. Dans ce scénario, vous disposez d'un div avec un débordement défini sur caché, où le texte s'agrandit vers la gauche à mesure que de nouveaux caractères sont ajoutés. Cependant, cela entraîne le recadrage de la fin du texte lorsqu'il dépasse la largeur du conteneur.

Obtention d'un contenu débordant à gauche

Pour obtenir l'effet souhaité d'affichage du débordement contenu à gauche, vous pouvez utiliser la propriété direction de CSS. En définissant la direction : rtl ; au div, le flux du texte est inversé. Cela signifie que de nouveaux caractères seront ajoutés sur le côté droit, mais le débordement se produira à gauche du conteneur.

Exemple de code

<code class="css">.text-container {
  width: 200px;
  overflow: hidden;
  direction: rtl;
}</code>

Avec ceci modification, le texte à l'intérieur du div s'agrandira désormais vers la gauche et les derniers caractères seront visibles même lorsque le texte dépasse la largeur du conteneur. Il est important de noter que la définition de direction: rtl; inverse la direction du texte pour tous les éléments du div, pensez donc à utiliser un style supplémentaire pour ajuster l'alignement en conséquence.

Référence

Pour plus d'informations sur la propriété direction et le texte direction en CSS, reportez-vous à :

• https://www.w3schools.com/cssref/pr_text_direction.asp

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!