Bagaimana untuk mencapai kesan elipsis di luar bahagian dalam html

Mengabaikan bahagian yang berlebihan dalam HTML ialah keperluan reka bentuk biasa. Apabila kandungan teks melampaui batas, kami biasanya memotongnya dan menggantikannya dengan elips. Ini bukan sahaja menjadikan kandungan kelihatan lebih bersih, tetapi ia juga memberikan pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan mengetepikan bahagian HTML yang berlebihan.

sifat limpahan-teks

Apabila melaksanakan kesan meninggalkan bahagian HTML yang berlebihan, kami biasanya menggunakan sifat limpahan teks CSS. Fungsinya adalah untuk menentukan cara bahagian yang berlebihan harus dikendalikan apabila kandungan teks dalam elemen melimpahi bekasnya.

Atribut ini mempunyai 3 nilai:

• clip: Nilai lalai, bahagian yang berlebihan akan dipangkas dan tidak dipaparkan.
• ellipsis: Bahagian yang berlebihan digantikan dengan elips.
• string: Bahagian yang berlebihan digantikan dengan rentetan yang diberikan.

Antaranya, yang paling biasa digunakan ialah ellipsis kerana ia boleh dengan mudah dan cepat mencapai kesan elipsis.

atribut ruang putih

Apabila menggunakan atribut limpahan teks, kita juga perlu menetapkan atribut ruang putih. Sifat ini menentukan cara ruang putih dalam elemen dikendalikan. Nilai lalai ialah normal, yang menggabungkan aksara ruang putih berturut-turut dan menukar baris baharu kepada ruang.

Jika kita ingin mengekalkan aksara ruang berterusan dalam teks, kita perlu menetapkan atribut ruang putih kepada pre-wrap. Selain itu, limpahan teks hanya akan berkuat kuasa apabila atribut ruang putih ditetapkan kepada nowrap dan pre-wrap.

Menggunakan CSS untuk mencapai kesan elipsis

Berikut ialah contoh penggunaan CSS untuk mencapai kesan elipsis:

<style>
  .ellipsis {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat magna vel leo sollicitudin convallis. Sed vestibulum auctor purus a tristique.
</div>

Dalam contoh di atas, kami mencipta tahap blok dengan Elemen lebar untuk memegang kandungan teks. Seterusnya, kami menetapkan sifat ruang putih kepada nowrap supaya ruang berturut-turut dalam teks tidak digabungkan. Kami menggunakan atribut limpahan untuk menyembunyikan bahagian limpahan dan menggunakan limpahan teks: elipsis untuk menggantikannya dengan elips.

Penggunaan kesan elipsis yang sesuai

Walaupun menggunakan kesan elips boleh menjadikan kandungan lebih kemas, kami juga perlu menggunakan elips dengan sewajarnya untuk memastikan pengalaman pengguna. Berikut ialah beberapa cadangan untuk penggunaan elips HTML yang betul:

• Gunakan elips hanya jika perlu. Jika semua teks digantikan dengan elips, ini akan mengelirukan pengguna kerana mereka tidak akan tahu apa itu teks tersembunyi.
• Benarkan ruang yang cukup untuk elips. Secara amnya, kita harus meninggalkan sedikit ruang untuk elips bagi memastikan pengguna dapat memahami dengan betul bahagian terpotong kandungan teks.
• Gunakan elips apabila membaca perenggan panjang teks. Elips dalam teks sering digunakan untuk membolehkan pembaca "melangkau" maklumat yang tidak diperlukan dengan cepat, seperti perenggan panjang ulasan atau artikel yang lebih panjang daripada lebar skrin. Dalam kes ini, elips memberikan pengalaman pengguna yang lebih baik kerana ia memudahkan pembaca memahami ringkasan teks.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan CSS untuk mencapai kesan mengabaikan bahagian yang berlebihan dalam HTML. Kami terutamanya menggunakan sifat limpahan teks dan ruang putih untuk mencapai tujuan ini. Akhir sekali, kami juga memberikan beberapa cadangan untuk penggunaan elips yang sesuai untuk membantu anda mengoptimumkan pengalaman pengguna.

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