Mengapa Ellipsis Tidak Muncul dalam Sel Jadual Saya?

Elipsis Tidak Muncul dalam Sel Jadual

Dalam jadual HTML yang diberikan, elipsis biasanya akan muncul apabila teks dalam sel melebihi yang ditentukan lebar. Walau bagaimanapun, teks dalam contoh yang disediakan tidak dipotong seperti yang dijangkakan.

Menyiasat Masalah

Apabila memeriksa output, lebar sel dilaporkan sebagai 139 piksel, menunjukkan bahawa kandungan hendaklah lebih luas daripada 50px yang ditentukan. Memeriksa gaya CSS, kami melihat tetapan berikut:

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

Semua sifat yang diperlukan untuk elipsis nampaknya ada. Jadi, mengapa ia tidak berfungsi?

Penyelesaian 1: Paparan: Sekat

Satu penyelesaian ialah menambah sifat berikut pada CSS:

<code class="css">td {
  display: block;
}</code>

Ini secara eksplisit menetapkan jenis paparan sel jadual kepada tahap blok, menyebabkan ia berkelakuan seperti bekas bebas dan mendayakan elipsis.

Penyelesaian 2: Reka Letak dan Lebar Jadual

Pendekatan lain ialah menetapkan susun atur jadual: tetap; untuk jadual, serta mentakrifkan lebar:

<code class="css">table {
  table-layout: fixed;
  width: 200px;
}</code>

Ini memaksa jadual untuk mempunyai reka letak tetap dan menetapkan lebarnya secara eksplisit, menghalang isu di mana lebar kandungan boleh menjejaskan pengiraan lebar sel.

Atas ialah kandungan terperinci Mengapa Ellipsis Tidak Muncul dalam Sel Jadual Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!