Comment puis-je redimensionner dynamiquement la taille de la police pour adapter le texte à un div ?

Dimensionnement dynamique des polices dans un div

Pour adapter de manière transparente le contenu du texte dans un div à ses dimensions, envisagez la solution suivante :

Implémentation de jQuery :

Ce code JavaScript, implémenté à l'aide de jQuery, ajuste la taille de la police de manière itérative jusqu'à ce que le texte tienne dans le div :

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

Structure HTML :

Définissez un div avec l'ID "fitin" et imbriquez un autre div à l'intérieur contenant le texte :

<div>
<p><strong>CSS Style :</strong></p>
<p>Pour limiter la taille du div et masquer le contenu débordant, ajoutez ce CSS :</p>
<pre class="brush:php;toolbar:false">#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

Exemple d'utilisation :

Initialiser le code JavaScript dans le bloc $(function() {...}) pour ajuster automatiquement la taille de la police lorsque la page charges.

Cette solution garantit que le contenu textuel peut s'intégrer gracieusement dans un div, quelles que soient ses dimensions, offrant ainsi une expérience flexible et conviviale pour le contenu dynamique.