Rumah > Artikel > hujung hadapan web > Bagaimana untuk Melaksanakan Ellipsis untuk Limpahan Teks Berbilang Baris dalam Bekas Tetap?

Bagaimana untuk Melaksanakan Ellipsis untuk Limpahan Teks Berbilang Baris dalam Bekas Tetap?

Patricia Arquetteasal: 2024-10-26 16:17:03719semak imbas

How to Implement Ellipsis for Multi-line Text Overflow within a Fixed Container?

Pengendalian Ellipsis untuk Limpahan Berbilang Baris dalam Bekas Tetap

Dalam pembangunan web, selalunya perlu untuk memaparkan teks berbilang baris dalam bekas dengan lebar dan ketinggian yang ditentukan . Walau bagaimanapun, apabila teks melebihi ruang yang tersedia, ia boleh mencipta limpahan yang tidak sedap dipandang. Untuk menangani perkara ini, pembangun sering mencari kaedah untuk melaksanakan elipsis, menunjukkan bahawa terdapat lebih banyak teks yang disembunyikan.

Satu senario sedemikian ialah apabila teks terkandung dalam

elemen dengan kedua-dua lebar dan tinggi tetap. Walaupun pelbagai pemalam jQuery wujud, mencari penyelesaian yang sempurna boleh menjadi mencabar. Artikel ini meneroka pendekatan asas tetapi berkesan untuk mencapai hasil yang diingini.

Menggunakan jQuery menyediakan cara mudah untuk memanipulasi kandungan teks

unsur. Matlamat kami adalah untuk mengalih keluar perkataan terakhir secara berulang sehingga ketinggian teks sesuai dengan ketinggian bekas yang ditentukan. Ini dicapai dengan memanfaatkan fungsi outerHeight() untuk menyemak sama ada ketinggian teks melebihi ketinggian bekas dan, jika benar, menggunakan fungsi text() untuk memotong perkataan terakhir daripada teks.

Untuk memastikan bahawa limpahan kekal tidak kelihatan, kami menggunakan limpahan: tersembunyi; Sifat CSS pada

unsur. Dengan cara ini, walaupun JavaScript dilumpuhkan, hasilnya kelihatan betul secara visual tanpa elipsis.

Berikut ialah kod CSS dan jQuery untuk penyelesaian ini:

<code class="css">#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }</code>

<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>

Pendekatan ini menawarkan penyelesaian yang mudah dan cekap kepada masalah limpahan teks berbilang baris dengan pengendalian elipsis dalam bekas dengan lebar dan ketinggian tetap. Dengan menggabungkan jQuery dengan CSS, anda boleh mencapai kesan visual yang diingini sambil mengekalkan kebolehaksesan walaupun JavaScript dilumpuhkan.

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

JavaScript jquery css if for while using Property function this display overflow word

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mengambil dan Menghuraikan Data Teks daripada Susunan URL dengan Promise.all?Artikel seterusnya：Bagaimana untuk Mengambil dan Menghuraikan Data Teks daripada Susunan URL dengan Promise.all?

Artikel berkaitan

Lihat lagi