Wie kann ich die Textgröße dynamisch anpassen, damit sie in ein Div passt?

Textgröße innerhalb eines Div dynamisch anpassen

Bei der Webentwicklung ist es oft notwendig, sicherzustellen, dass der Text in ein bestimmtes Div passt und gleichzeitig seine Größe behält Lesbarkeit. So erreichen Sie dies:

Angenommen, Sie haben ein Div mit einem Hintergrundbild und möchten Text hinzufügen, der seine Schriftgröße dynamisch anpasst. Sie können dies mit jQuery erreichen:

<div>
<pre class="brush:php;toolbar:false">#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" );
    }
});

Dieser Code verringert kontinuierlich die Schriftgröße des Texts innerhalb des Div, bis er in die Höhe des Div passt. Die while-Schleife wird wiederholt, bis die Texthöhe kleiner oder gleich der Div-Höhe wird.