Bagaimana untuk Membuat Teks Limpahan Elipsis Berfungsi dalam Sel Jadual?

Elipsis Sukar: Mendedahkan Cabaran CSS dalam Sel Jadual

Pertimbangkan senario mudah: anda ingin memaparkan teks panjang dalam sel jadual, sambil mengehadkan lebarnya kepada 50 piksel. Sememangnya, anda menggunakan sifat CSS untuk mencapai ini: text-overflow: ellipsis, white-space: nowrap dan set width. Walau bagaimanapun, yang mengejutkan anda, elipsis tidak dijumpai di mana-mana, membuatkan anda tertanya-tanya.

Untuk memahami isu ini, mari kita mendalami spesifikasi CSS. Sifat limpahan teks mempengaruhi elemen sebaris, sel jadual yang bukan secara lalai. Untuk mendayakan elipsis, kita perlu menetapkan paparan: blok atau paparan: blok sebaris secara eksplisit untuk sel jadual. Ini memberi mereka gelagat seperti sebaris, membenarkan sifat limpahan teks berkuat kuasa.

Sebagai alternatif, anda boleh memilih pendekatan lain. Dengan menetapkan susun atur jadual: tetap; untuk jadual dan menentukan lebarnya, anda memaksa lebar untuk diagihkan sama rata ke seluruh sel. Ini secara berkesan juga membolehkan elipsis dalam sel.

Begini rupa kod dengan penyelesaian ini:

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

atau

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

Melaksanakan salah satu daripada penyelesaian ini akan selesaikan isu, membenarkan elipsis berfungsi seperti yang dimaksudkan dalam sel jadual.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Teks Limpahan Elipsis Berfungsi dalam Sel Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!