Comment puis-je redimensionner la police pour l'adapter à une division sur une seule ligne à l'aide de JavaScript ?

Redimensionner la police pour adapter un div sur une seule ligne à l'aide de JavaScript

Situation :

Vous avez un article avec un titre dans un format

balise, mais vous voulez vous assurer que le titre reste sur une seule ligne quelle que soit sa longueur.

Solution CSS :

Aucun attribut CSS ne vous permet de redimensionne automatiquement le texte en fonction de la largeur du div.

JavaScript/jQuery Solution :

1. Créez un div caché avec les styles suivants :

   position: absolute;
   visibility: hidden;
   white-space: nowrap;
   font-family: [same as the title's]

2. Copiez le texte du titre dans le div caché.
3. Définissez une taille de police initiale pour le div caché.
4. Implémentez une boucle while qui incrémente la taille de police de le div caché jusqu'à ce que sa largeur corresponde à la largeur du div parent.
5. Définissez la taille de police calculée sur le titre original.

Optimisation :

Pour améliorer les performances, vous pouvez optimiser la boucle while pour diminuer les itérations :

1. Définir une police de départ size.
2. Obtenez la largeur du div de test.
3. Calculez le facteur de largeur entre le div d'origine et le div de test.
4. Ajustez la taille de la police en fonction de ce facteur, plutôt que d'incrémenter/décrémenter d'une unité.
5. Testez la largeur du div de test.

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!