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

Ajuster dynamiquement la taille du texte dans un div

Dans le développement Web, il est souvent nécessaire de s'assurer que le texte tient dans un div désigné tout en préservant son lisibilité. Voici comment y parvenir :

Supposons que vous ayez un div avec une image d'arrière-plan et que vous souhaitiez ajouter du texte qui ajuste dynamiquement la taille de sa police. Vous pouvez y parvenir en utilisant jQuery :

<div>

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

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

Ce code diminue continuellement la taille de la police du texte dans le div jusqu'à ce qu'il tienne dans la hauteur du div. La boucle while itère jusqu'à ce que la hauteur du texte devienne inférieure ou égale à la hauteur du 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!