Wie kann ich die Schriftgröße dynamisch ändern, um sie an den Text innerhalb eines Div anzupassen?

Dynamische Schriftgröße innerhalb eines Div

Um Textinhalte innerhalb eines Div nahtlos an seine Abmessungen anzupassen, ziehen Sie die folgende Lösung in Betracht:

jQuery-Implementierung:

Dieser JavaScript-Code, implementiert mit jQuery passt die Schriftgröße iterativ an, bis der Text in das Div passt:

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

HTML-Struktur:

Definieren Sie ein Div mit der ID „fitin“ und verschachteln Sie es ein weiteres Div darin, das den Text enthält:

<div>

CSS Stil:

Um die Div-Größe einzuschränken und überlaufenden Inhalt auszublenden, fügen Sie dieses CSS hinzu:

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

Beispielverwendung:

Initialisieren Der JavaScript-Code innerhalb des $(function() {...})-Blocks, um die Schriftgröße beim Öffnen der Seite automatisch anzupassen lädt.

Diese Lösung stellt sicher, dass Textinhalte unabhängig von ihren Abmessungen problemlos in ein Div passen und bietet so eine flexible und benutzerfreundliche Erfahrung für dynamische Inhalte.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße dynamisch ändern, um sie an den Text innerhalb eines Div anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!