Comment puis-je étirer le texte pour remplir la largeur d'un Div à l'aide de CSS ?

Étendre le texte pour occuper la largeur d'un div

Dans une situation où votre div conserve une largeur cohérente mais peut contenir des quantités variables de texte, le défi se pose : comment répartir l'espacement des lettres pour remplir de manière optimale le div ?

Heureusement, cette prouesse est possible grâce à une stratégie combinaison de propriétés CSS et un hack intelligent.

Solution :

1. Appliquer text-align:justify; au div : Cela garantit que le texte s'aligne uniformément sur les côtés gauche et droit de l'espace alloué.
2. Incorporez un élément span : Implémentez une balise span à côté du div et définissez sa largeur à 100 % et sa hauteur à 1em à l'aide de l'affichage en bloc en ligne. Cela servira d'« espaceur » au bas du texte.

Exemple de code :

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>

Cette stratégie oblige le texte pour s'étendre sur toute la largeur du div tout en préservant l'espacement des lettres, créant ainsi un effet visuellement équilibré.

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!