Redimensionner dynamiquement la taille de la police pour s'adapter à la taille du conteneur

Besoin de créer un modèle avec les fonctionnalités suivantes:

  • Contenant deux conteneurs (lignes)
    • La rangée supérieure est la taille fixe
    • La taille de fond elle-même vers un espace vertical maximum disponible
  • Le texte (taille de police) à l'intérieur du conteneur inférieur doit être redimensionné dynamiquement pour s'adapter à la hauteur du conteneur .

La réponse à la première question est simple, mais en l'ajoutant ici, car je ne sais pas si la deuxième question ne dépend pas de celle-ci.

Voici déjà de nombreuses questions qui demandent comment redimensionner dynamiquement le texte dans la zone de texte ou les champs de saisie. Mais cette question est plus spéciale, car elle nécessite probablement des mots de comptage ou un peu plus pour s'adapter à la taille du conteneur.

Est-ce que quelqu'un peut m'aider avec quelques conseils sur déjà jquery ou toute autre solution js / css?

Je ne suis pas un concepteur de sites Web et je ne souhaite qu'un seul modèle de page Web simple qui utilisera pour correspondre à mes textes – je connais un peu css – mais pas javascript – demandez donc au pointeur de toute solution "prêt à exécuter" , S'il existe …

MODIFIER

En vérifiant les solutions de débordement, cette réponse https://stackoverflow.com/a/7138971/869025 fonctionne parfaitement pour détecter le débordement vertical. Maintenant, les questions sont, comment ajouter la vérification javascript de débordement ci-dessus au cycle, ce qui changera ma police en plus petite.

Pour mieux illustrer l'attachement de deux images de démonstration … Entrez la description de l'image iciEntrez la description de l'image ici

Fondamentalement, vous avez besoin de la suivante:

while( is_overflow_in_the_second_div() ) { set_smaller_font(); } 

Donc, vous devriez vérifier les questions avec

  • Comment détecter les barres de défilement
  • Comment détecter le débordement

Et comme, par exemple:

  • Existe-t-il un moyen de déclencher un événement lorsque le débordement vertical est détecté dans un div?
  • Détecter s'il y a trop de débordement ou non SANS javascript
  • Comment détecter le débordement dans l'élément div?
  • Vérifiez si l'élément HTML comporte des barres de défilement
  • CSS – Appliquer un autre style si le contenu évolue vers une nouvelle ligne
  • Déterminer si le contenu d'un élément HTML déborde

Peut-être beaucoup d'autres.

Peut-être que vous n'avez pas recherché les questions pour le bon mot-clé, mais cela est sans doute un double. 🙂

Je pense que vous pourriez vérifier cette question: JavaScript Scale Text to Fit in Fixed Div

Comme je comprends, c'est ce dont vous avez besoin.

EDIT: J'ai trouvé quelque chose de vraiment intéressant dans Gist: https://gist.github.com/mekwall/1263939