Bagaimanakah Saya Boleh Mengubah Saiz Fon Secara Dinamik agar Sesuai dengan Teks Dalam Div?

Saiz Font Dinamik Dalam Div

Untuk menyesuaikan kandungan teks dalam div dengan lancar agar sesuai dengan dimensinya, pertimbangkan penyelesaian berikut:

Pelaksanaan jQuery:

Ini Kod JavaScript, dilaksanakan menggunakan jQuery, melaraskan saiz fon secara berulang sehingga teks muat dalam div:

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

Struktur HTML:

Tentukan div dengan ID "fitin" dan sarangkan div lain di dalamnya yang mengandungi teks:

<div>

CSS Penggayaan:

Untuk mengekang saiz div dan menyembunyikan kandungan yang melimpah, tambahkan CSS ini:

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

Contoh Penggunaan:

Mulakan kod JavaScript dalam blok $(function() {...}) untuk melaraskan saiz fon secara automatik apabila halaman dimuatkan.

Penyelesaian ini memastikan kandungan teks boleh dimuatkan dengan anggun dalam div, tanpa mengira dimensinya, memberikan pengalaman yang fleksibel dan mesra pengguna untuk kandungan dinamik.

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