Bagaimana untuk Melaksanakan Ellipsis untuk Limpahan Teks Berbilang Baris dalam Bekas Tetap?-tutorial js-php.cn

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

Patricia Arquette

Lepaskan： 2024-10-26 16:17:03

asal

637 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mengambil dan Menghuraikan Data Teks daripada Susunan URL dengan Promise.all? Artikel seterusnya：Bagaimana untuk Menghentikan Butang Luaran daripada Menghantar Borang dalam HTML?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1687

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1840

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1565

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...