Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Textgröße automatisch so anpassen, dass sie in ein Div passt?

Wie kann ich die Textgröße automatisch so anpassen, dass sie in ein Div passt?

Susan Sarandon
Freigeben: 2024-12-06 07:16:11
Original
500 Leute haben es durchsucht

How Can I Automatically Adjust Text Size to Fit Within a Div?

Anpassen der Textgröße an ein Div

In Ihrer Situation haben Sie ein Hintergrundbild mit einem Div, in dem Sie Text anzeigen möchten. Sie möchten jedoch, dass die Schriftgröße des Texts automatisch an das Div angepasst wird. Um dies zu erreichen, ziehen Sie die folgende Lösung in Betracht:

jQuery Implementierung:

http://jsfiddle.net/MYSVL/2/
Nach dem Login kopieren

HTML:

<div>
Nach dem Login kopieren

CSS:

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

JavaScript:

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

Dieser Code iterativ Reduziert die Schriftgröße, bis der Text genau in das Div passt.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage