Comment redimensionner dynamiquement la taille de la police pour l'adapter à une division sur une seule ligne ?

Ajuster la taille de la police pour s'adapter à un div sur une seule ligne

Question :

Comment puis-je redimensionner dynamiquement la police d'un élément de texte pour m'assurer qu'il tient dans une balise div spécifiée, l'empêchant ainsi de s'enrouler sur plusieurs lignes ?

Réponse :

Solution CSS :

CSS seul ne peut pas réaliser cette fonctionnalité.

Solution JavaScript :

Méthode 1 : Utiliser Javascript et jQuery

1. Créez un div caché avec des propriétés CSS similaires à celles de l'élément de texte d'origine (par exemple, font-family, position : absolue, visibilité : cachée).
2. Copiez le texte de l'élément d'origine vers le div caché.
3. Définissez une taille de police initiale pour l'élément caché. div.

4. Entrez une boucle qui :

   • Obtient la largeur du div caché.
   • La compare à la largeur souhaitée du div d'origine.
   • Ajuste la taille de la police du div caché par un facteur ou une unité défini jusqu'à ce que la largeur souhaitée soit rencontré.
5. Définissez la taille de police calculée sur l'élément de texte d'origine.

Méthode 2 : Optimisation de la boucle While

Pour minimiser le nombre d'itérations de boucle :

1. Définissez une police de départ size.
2. Obtenez la largeur du div caché.
3. Calculez le rapport de largeur entre le div d'origine et le div caché.
4. Ajustez la taille de la police du div caché en ce facteur au lieu d'incrémenter ou de décrémenter d'une unité.
5. Testez la largeur du masqué 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!