Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Memaparkan Elipsis dalam Span yang Melimpah?

Bagaimanakah Saya Boleh Memaparkan Elipsis dalam Span yang Melimpah?

Mary-Kate Olsen
Lepaskan: 2024-10-27 12:26:30
asal
415 orang telah melayarinya

How Can I Display an Ellipsis in an Overflowing Span?

Memaparkan Elipsis dalam Rentang Melimpah

Untuk menunjukkan titik ("...") dalam rentang dengan limpahan tersembunyi, anda boleh menggunakan limpahan teks: sifat elipsis. Ia memotong teks yang melimpah dan sebaliknya memaparkan elipsis.

Begini cara anda boleh melaksanakannya:

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>
Salin selepas log masuk

Dalam coretan ini:

  • paparan: inline-block membenarkan rentang mengambil ruang sebaris semasa masih seperti blok.
  • lebar: 180px menetapkan lebar rentang kepada 180 piksel.
  • ruang putih: nowrap menghalang pembalut teks dalam rentang.
  • limpahan: tersembunyi !penting memastikan kandungan disembunyikan apabila ia melimpahi lebar rentang.
  • limpahan teks: elipsis memotong teks dan memaparkan elipsis apabila kandungan melimpah. .

Dengan menggabungkan sifat ini, anda boleh memaparkan elipsis dalam rentang anda, menunjukkan bahawa terdapat lebih banyak kandungan yang tersembunyi daripada pandangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Elipsis dalam Span yang Melimpah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan