Bagaimanakah Saya Boleh Melaraskan Saiz Teks Secara Automatik agar Sesuai Dalam Div Terkekang?

Memperhalus Saiz Teks dalam Div Terkekang: Penyelesaian Automatik

Bayangkan mempunyai imej latar belakang dengan div dan keinginan untuk tindanan teks yang melaraskan saiz fonnya secara automatik agar muat dalam div terkurung. Soalan ini mencari penyelesaian kepada masalah biasa ini, dan di sini kami menyediakan jawapan yang komprehensif.

Pelaksanaan jQuery: Panduan Langkah demi Langkah

Untuk mencapai yang diinginkan kesan, kami mencadangkan penyelesaian berasaskan jQuery, seperti yang ditunjukkan dalam contoh interaktif ini: http://jsfiddle.net/MYSVL/2/.

Kami bermula dengan mencipta bekas div dengan kandungan teks:

<div>

Seterusnya, kami mengenakan saiz tetap pada bekas div :

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

Untuk melaraskan saiz teks secara dinamik, kami menggunakan JavaScript berikut kod:

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

Kod ini secara berulang mengecilkan saiz fon div dalam sehingga teks muat dalam ketinggian yang ditentukan div bekas, memastikan kebolehbacaan optimum dan paparan kandungan dalam ruang yang terhad.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Saiz Teks Secara Automatik agar Sesuai Dalam Div Terkekang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!