Bagaimana untuk Melaksanakan Ellipsis dengan Lebar dan Ketinggian Tetap dalam Teks Berbilang Baris?

Elipsis dengan Lebar dan Tinggi Tetap dalam Teks Berbilang Baris

Limpahan teks berbilang baris dengan elipsis boleh dicapai dalam lebar tetap dan bekas ketinggian menggunakan JavaScript. Untuk memahami konsep, bayangkan div dengan dimensi pratakrif yang mengandungi berbilang baris teks.

Matlamatnya adalah untuk memastikan teks dipotong pada baris yang ditentukan dan menambah elipsis untuk menunjukkan kesinambungan. Begini cara ia boleh dilaksanakan:

1. Harta Limpahan: Tetapkan sifat limpahan div kepada "tersembunyi" untuk mengelakkan teks daripada melimpahi sempadannya.
2. Ketinggian Garisan dan Ketinggian Maks: Tentukan ketinggian garisan dan ketinggian maksimum untuk div untuk mengehadkan bilangan baris yang boleh ditampungnya.
3. Pemotongan Teks: Gunakan jQuery untuk mengalih keluar perkataan terakhir teks berulang kali sehingga ia muat dalam saiz yang dikehendaki. Berikut ialah contoh:

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

4. Pemangkasan Sebelah Pelayan: Gabungkan pemangkasan sebelah pelayan untuk prestasi dan untuk mempersembahkan teks yang boleh dibaca tanpa elipsis apabila JavaScript dilumpuhkan.

Pendekatan ini menyediakan penyelesaian asas untuk limpahan teks dengan elipsis dalam had tetap. Untuk pelaksanaan yang lebih menyeluruh, pertimbangkan untuk melaksanakan pemangkasan sebelah pelayan atau menggunakan pemalam jQuery yang menawarkan fungsi yang dipertingkatkan untuk pemangkasan teks.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Ellipsis dengan Lebar dan Ketinggian Tetap dalam Teks Berbilang Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!