Comment puis-je faire en sorte que le texte remplisse parfaitement la largeur d'un conteneur à l'aide de CSS ?

Étendre le texte pour l'adapter à la largeur du conteneur

Améliorer l'esthétique du texte au sein d'un div contraint est un défi courant. Lorsque le contenu du texte varie, il est souhaitable de conserver une apparence visuelle soignée et équilibrée. Cet article explore comment réaliser cette intégration transparente en utilisant une combinaison de CSS et une technique intelligente.

Solution : justification par alignement du texte et astuce subtile

La propriété CSS text-align:justify distribue uniformément le texte dans un div, en l'alignant le long des marges gauche et droite. Cependant, la justification standard conserve l’espacement spécifié des lettres. Pour un ajustement vraiment parfait, un petit hack ajoute une étendue transparente d'une largeur de 100 %.

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 astuce crée essentiellement un espace "factice" qui remplit la largeur restante du div, forçant le texte à développer et à aligner étroitement dans son conteneur.

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!