Wie kann ich die Textgröße automatisch anpassen, damit sie in ein eingeschränktes Div passt?

Feinabstimmung der Textgröße innerhalb eines eingeschränkten Div: Eine automatische Lösung

Stellen Sie sich vor, Sie hätten ein Hintergrundbild mit einem Div und den Wunsch, es zu überlagern Text, dessen Schriftgröße automatisch so angepasst wird, dass er in das begrenzte div passt. Diese Frage sucht nach einer Lösung für dieses häufige Problem, und hier geben wir eine umfassende Antwort.

jQuery-Implementierung: Eine Schritt-für-Schritt-Anleitung

Um das Gewünschte zu erreichen Daher schlagen wir eine jQuery-basierte Lösung vor, wie in diesem interaktiven Beispiel gezeigt: http://jsfiddle.net/MYSVL/2/.

Wir beginnen mit der Erstellung ein div-Container mit Textinhalt:

<div>

Als nächstes legen wir eine feste Größe für den div-Container fest:

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

Um die Textgröße dynamisch anzupassen, verwenden wir den folgenden JavaScript-Code :

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

Dieser Code verringert iterativ die Schriftgröße des inneren Div, bis der Text in die angegebene Höhe des Container-Div passt, um sicherzustellen optimale Lesbarkeit und Inhaltsdarstellung auf engstem Raum.

Das obige ist der detaillierte Inhalt vonWie kann ich die Textgröße automatisch anpassen, damit sie in ein eingeschränktes Div passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!