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

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!