Bagaimana untuk mencapai kesan elipsis di luar bersembunyi dalam CSS

Dalam reka letak halaman web, kita selalunya perlu mengehadkan lebar atau ketinggian elemen tertentu Apabila lebar atau tinggi melebihi had, cara memaparkan kandungan teks adalah perkara yang sangat penting. Biasanya, kita boleh menggunakan atribut overflow:hidden dalam CSS untuk mengehadkan paparan kandungan elemen. Walau bagaimanapun, apabila kandungan disembunyikan, beberapa maklumat penting mungkin ditinggalkan, yang tidak mesra pengguna. Oleh itu, kita perlu menggunakan pilihan elipsis CSS untuk memberitahu pengguna bahawa kandungan teks telah ditinggalkan.

Secara amnya, apabila kandungan teks melebihi had, kaedah pemprosesan lalai penyemak imbas adalah untuk memotong dan menyembunyikan lebihan teks Walau bagaimanapun, kadangkala kita perlu memaparkan elips untuk memberitahu pengguna bahawa sesetengah kandungan telah ditinggalkan. Pada masa ini, kita boleh mencapai ini melalui sifat limpahan teks dalam CSS.

Limpahan teks sifat CSS digunakan untuk menentukan cara memaparkan elipsis apabila teks melimpahi elemen yang mengandungi. Atribut limpahan teks mempunyai tiga nilai: klip, elipsis dan rentetan.

1. Nilai klip bermakna apabila teks melimpah, kandungan di luar teks disembunyikan dan elipsis tidak dipaparkan. Nilai
2. ellipsis bermakna apabila teks melimpah, kandungan di luar teks disembunyikan dan elipsis dipaparkan pada penghujung teks. Nilai rentetan
3. bermakna apabila teks melimpah, sembunyikan kandungan di luar teks dan paparkan rentetan yang diberikan pada penghujung teks. Sebagai contoh, anda boleh menetapkan nilai kepada "...", kemudian tiga titik akan dipaparkan pada penghujung teks, menunjukkan bahawa beberapa kandungan telah ditinggalkan.

Atribut text-overflow mesti digunakan bersama-sama dengan atribut overflow:hidden dan white-space:nowrap. Antaranya, white-space:nowrap menunjukkan bahawa teks tidak boleh dibalut dan hanya boleh dipaparkan dalam satu baris. overflow:hidden menunjukkan bahawa apabila teks melimpah, bahagian yang berlebihan akan disembunyikan.

Berikut ialah contoh Kami menetapkan lebar elemen div kepada 100px, ketinggian kepada 50px dan kandungan teks ialah teks yang sangat panjang. Apabila teks melimpah, kami menggunakan sifat text-overflow:ellipsis dalam CSS untuk memaparkan elipsis:

<div class="text-overflow">这是一个超长的文本，它将会在这个div中被限制宽度和高度。</div>

.text-overflow {
  width: 100px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Dalam kod di atas, kami mengehadkan lebar dan ketinggian elemen dan melebihi Bahagian teks akan disembunyikan. Pada masa yang sama, kami menetapkan teks untuk tidak membalut dan boleh dipaparkan dalam satu baris. Akhir sekali, kami menggunakan atribut text-overflow:ellipsis untuk memaparkan elips.

Ringkasan

Sifat sembunyi-sembunyi dan elipsis CSS ialah teknik biasa dalam reka letak halaman web dengan berkesan boleh mengehadkan lebar atau ketinggian elemen dan memaparkan elips apabila teks melimpah, membolehkan pengguna untuk. Harap maklum bahawa beberapa maklumat telah ditinggalkan. Atribut text-overflow mesti digunakan bersama-sama dengan atribut overflow:hidden dan white-space:nowrap untuk melaksanakan kesan paparan elipsis dengan betul.

Saya harap artikel ini bermanfaat kepada anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan elipsis di luar bersembunyi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!