Bagaimana untuk Melaksanakan Limpahan Teks CSS dengan Ellipsis dalam Sel Jadual?

Limpahan teks CSS dalam Sel Jadual

Matlamatnya adalah untuk melaksanakan limpahan teks CSS dalam sel jadual, memastikan teks melebihi lebar sel dipotong dengan elipsis, menghalangnya daripada membalut kepada berbilang baris.

Percubaan:

Percubaan awal dibuat menggunakan CSS berikut:

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Walau bagaimanapun, ruang putih: harta nowrap menyebabkan teks dan selnya mengembang ke kanan tanpa had, melebihi jadual bekas.

Penyelesaian:

Untuk mencapai kesan yang diingini, seseorang mesti menetapkan sifat CSS lebar maksimum untuk setiap sel jadual. Berikut ialah contoh:

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Menetapkan lebar maks memastikan limpahan terkandung dalam lebar yang ditentukan.

Reka Letak Responsif:

Untuk reka letak responsif, pertimbangkan untuk menggunakan lebar maks untuk menentukan lebar minimum lajur atau menetapkannya kepada lebar maksimum: 0; untuk fleksibiliti penuh. Jadual yang mengandungi harus mempunyai lebar tertentu, seperti lebar: 100%;.

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Pertimbangan IE:

Untuk IE 9 atau lebih awal, HTML berikut hack diperlukan untuk menyelesaikan isu pemaparan:

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

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