Comment puis-je ajuster automatiquement la taille du texte pour l'adapter à une division contrainte ?

Affiner la taille du texte dans un div contraint : une solution automatique

Imaginez avoir une image d'arrière-plan avec un div et le désir de superposer texte qui ajuste automatiquement sa taille de police pour s'adapter au div confiné. Cette question cherche une solution à ce problème courant, et nous fournissons ici une réponse complète.

Mise en œuvre de jQuery : un guide étape par étape

Pour atteindre l'objectif souhaité effet, nous proposons une solution basée sur jQuery, comme démontré dans cet exemple interactif : http://jsfiddle.net/MYSVL/2/.

Nous commençons par créer un conteneur div avec un contenu texte :

<div>

Ensuite, nous imposons une taille fixe au conteneur div :

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

Pour ajuster dynamiquement la taille du texte, nous utilisons le code JavaScript suivant :

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

Ce code diminue de manière itérative la taille de la police du div interne jusqu'à ce que le texte tienne dans la hauteur spécifiée du div du conteneur, garantissant ainsi une lisibilité et affichage du contenu dans un espace restreint.

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!