Maison > interface Web > tutoriel CSS > le corps du texte

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

Susan Sarandon
Libérer: 2024-11-23 15:22:21
original
743 Les gens l'ont consulté

How Can I Dynamically Resize Text to Fit a Div's Width Using 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;
}
Copier après la connexion

HTML :

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal