Bagaimana untuk Membetulkan Limpahan Teks Merentas Pelayar dalam Elemen Lebar Tetap, Berbilang Baris Menggunakan jQuery?

Membetulkan Limpahan Teks Merentas Pelayar dalam Elemen Lebar Tetap, Berbilang Baris

Pertimbangkan senario di mana anda mempunyai div dengan kekangan lebar dan berbilang baris teks. Bagaimanakah anda boleh memastikan teks yang melimpah dipotong dengan elips (...)?

Elipsis Berbilang Baris dengan jQuery

Manakala pelbagai pemalam jQuery menangani limpahan teks dalam beberapa kapasiti, mencari satu yang khusus disesuaikan dengan keperluan anda boleh menjadi satu cabaran. Berikut ialah pendekatan asas menggunakan jQuery:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

Skrip ini secara berulang mengalih keluar perkataan terakhir daripada teks sehingga ketinggian sepadan dengan div. Walaupun dengan JavaScript dilumpuhkan, teks yang dipotong tetap betul secara visual.

Pengoptimuman Bahagian Pelayan

Menggabungkan pendekatan ini dengan pemangkasan bahagian pelayan boleh meningkatkan prestasi dengan meninggalkan overhed yang minimum .

Nota: Penyelesaian ini adalah titik permulaan dan mungkin memerlukan pemurnian lanjut berdasarkan keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Limpahan Teks Merentas Pelayar dalam Elemen Lebar Tetap, Berbilang Baris Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!