Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Melaksanakan Ellipsis (\"...\") untuk Limpahan Teks dalam CSS?

Bagaimana untuk Melaksanakan Ellipsis (\"...\") untuk Limpahan Teks dalam CSS?

Susan Sarandon
Susan Sarandonasal
2024-10-30 21:20:30783semak imbas

How to Implement Ellipsis (

Cara Memaparkan Ellipsis ("...") untuk Text Overflow dalam CSS

Apabila berurusan dengan teks yang melebihi ruang yang tersedia, adalah perkara biasa untuk memerlukan visual penunjuk untuk mencadangkan bahawa lebih banyak kandungan tersedia. Ini boleh dicapai dengan menunjukkan titik (ellipsis) dalam elemen span menggunakan CSS.

Untuk mendayakan fungsi ini, ikut langkah berikut:

  1. Pastikan Limpahan Tersembunyi:
    Gunakan limpahan: tersembunyi !penting; sifat untuk menyembunyikan teks yang melimpah.
  2. Gunakan Limpahan Teks:
    Tambah limpahan teks: elipsis; sifat untuk menunjukkan bahawa teks harus dipangkas dengan elipsis (...) apabila ia melimpahi ruang yang tersedia.
  3. Pilihan: Kawalan Ruang Putih:
    Untuk mengelakkan pembalut garisan dan pastikan elipsis muncul selepas aksara terakhir, tetapkan ruang putih: nowrap;.

Berikut ialah contoh kod:

<code class="css">span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}</code>
<code class="html"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span></code>

Dengan melaksanakan sifat CSS ini, anda boleh memaparkan elipsis dengan berkesan dalam elemen span dengan limpahan tersembunyi, menunjukkan bahawa terdapat lebih banyak teks yang tersedia di luar julat yang boleh dilihat.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Ellipsis (\"...\") untuk Limpahan Teks dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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