Comment puis-je redimensionner dynamiquement le texte pour l'adapter à la largeur d'un Div à l'aide de CSS ?

Redimensionner le texte pour l'adapter dynamiquement à la largeur du div

Dans les scénarios où la largeur du div reste statique alors que le contenu du texte est variable, aligner le texte pour justifier pourrait ne pas suffire. Pour obtenir un ajustement parfait, il faut ajuster l'espacement des lettres.

Solution CSS avec une astuce

Pour y parvenir, utilisez la combinaison de text-align:justify et un astucieux hack :

CSS :

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

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

HTML :

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

Explication :

• Définissez l'alignement du texte pour justifier l'utilisation du texte- align:justify.
• Insérez un élément span dans le div.
• Stylisez l'étendue avec la couleur d'arrière-plan (visible pour la démonstration), 100 % de largeur, 1em de hauteur et un affichage en bloc en ligne.
• En définissant la largeur de l'étendue à 100 % et en la faisant transparent, il agit comme un conteneur qui se dilate pour remplir l'espace restant dans le div.

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!