Bagaimana untuk Memaparkan Ellipsis dalam Span dengan Limpahan Tersembunyi dalam CSS?

Memaparkan Ellipsis dalam Span dengan Limpahan Tersembunyi

Dalam CSS, sifat limpahan menentukan perkara yang berlaku apabila kandungan elemen melimpahi hadnya. Dalam senario yang diberikan, CSS untuk elemen span menyembunyikan sebarang kandungan yang melimpah. Ini mengakibatkan kandungan terputus, seperti yang diperhatikan dalam coretan kod.

Untuk menangani isu ini, anda boleh menggunakan sifat limpahan teks, yang mengawal tingkah laku teks limpahan. Dengan menetapkan limpahan teks kepada elipsis, anda boleh menentukan bahawa sebarang teks yang melimpah harus digantikan dengan elipsis (...). Ini akan membolehkan anda memaparkan sebahagian daripada teks dalam rentang sambil menunjukkan bahawa terdapat lebih banyak lagi.

Begini cara anda boleh mengubah suai CSS anda untuk mencapai hasil yang diingini:

<code class="css">span {
  display: inline-block;
  width: 180px;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

Ini CSS yang dikemas kini akan memaparkan teks dalam elemen span, sehingga 180 piksel lebar. Sebarang teks yang tinggal akan digantikan dengan elipsis.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Ellipsis dalam Span dengan Limpahan Tersembunyi dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!