Penjelasan terperinci tentang sifat limpahan teks CSS: limpahan teks dan elipsis

Penjelasan terperinci tentang sifat limpahan teks CSS: limpahan teks dan elipsis

Dalam reka bentuk web, sering dijumpai kandungan teks adalah terlalu lama untuk menjadi Paparan penuh keadaan. Pada masa ini, kita boleh menggunakan sifat limpahan teks CSS untuk mengawal cara teks dipaparkan. Antaranya, dua sifat yang paling biasa digunakan ialah limpahan teks dan elipsis.

text-overflow property
Sifat text-overflow digunakan untuk menetapkan cara teks dipaparkan apabila teks melimpahi bekas. Ia mempunyai tiga nilai berikut:

1. klip: Nilai lalai, menunjukkan bahawa teks yang melimpah akan dipotong dan bahagian yang melimpah tidak akan dipaparkan.
2. ellipsis: Teks yang menunjukkan limpahan akan diwakili oleh elipsis.
3. rentetan: Menunjukkan bahawa teks yang melimpah akan digantikan dengan rentetan yang ditentukan.

elipsis attribute
ellipsis ialah atribut singkatan text-overflow Menggunakan atribut elipsis boleh mencapai kesan paparan elipsis dengan lebih cepat apabila teks melimpah. Ia hanya mempunyai satu nilai: elipsis, yang bermaksud bahawa teks yang melimpah akan diwakili oleh elips.

Contoh kod:
Mari kita lihat cara menggunakan limpahan teks dan elipsis untuk mencapai kesan paparan elipsis apabila teks melimpah.

Kod HTML:

<div class="overflow-container">
  <p class="text">这是一段很长的文本，当超出容器时将以省略号方式显示。</p>
</div>

Kod CSS:

.overflow-container {
  width: 300px; /* 设置容器的宽度 */
  white-space: nowrap; /* 设置文本不换行 */
}

.text {
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的部分 */
}

Dalam kod di atas, kami mencipta bekas dengan lebar 300px dan menambah teks dibalut dengan tag perenggan. Dengan menetapkan lebar bekas dan sifat teks, apabila kandungan teks terlalu panjang, bahagian yang melimpah akan disembunyikan dan dipaparkan dalam bentuk elips.

Ringkasan:
Dalam reka bentuk web, mengawal cara limpahan teks dipaparkan ialah kemahiran penting. Dengan menggunakan sifat limpahan teks dan elipsis CSS, kita boleh mencapai kesan paparan elipsis dengan mudah. Atribut ini boleh membantu kami memaparkan lebih banyak kandungan dalam ruang terhad dan meningkatkan pengalaman pengguna.

Nota: Sifat limpahan teks dan elipsis mungkin mempunyai isu keserasian pada sesetengah penyemak imbas (terutamanya penyemak imbas mudah alih). Apabila menggunakan sifat ini, adalah disyorkan untuk menguji keserasian setiap pelayar terlebih dahulu untuk memastikan kesan paparan yang terbaik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat limpahan teks CSS: limpahan teks dan elipsis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!