Bagaimanakah Saya Boleh Klip Teks dengan Elipsis dalam Sel Jadual Menggunakan CSS?

Memotong Teks dengan Elipsis dalam Sel Jadual Menggunakan CSS

Soalan:

Bolehkah anda klip teks dalam sel jadual dengan elipsis dan bukannya membenarkannya membungkus kepada berbilang baris?

Percubaan Penyelesaian:

Menggunakan limpahan sifat CSS: tersembunyi, limpahan teks: elipsis dan ruang putih: nowrap tidak berfungsi seperti yang dimaksudkan.

Jawapan:

Untuk berjaya memotong teks yang melimpah dalam sel jadual, anda perlu menambah sifat lebar maks pada kelas td:

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

Ini menetapkan lebar maksimum untuk setiap sel jadual dan menggunakan sifat lain untuk memastikan ia diklip dengan elipsis apabila teks melebihi lebar yang ditentukan.

Dalam reka letak responsif, anda boleh menggunakan maksimum dinamik lebar:

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

Selain itu, jadual yang mengandungi memerlukan lebar tertentu:

table {
  width: 100%;
}

Lebar sel jadual boleh ditetapkan sebagai peratusan:

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

Untuk versi lama Internet Explorer (IE 9 atau kurang), kod tambahan ini diperlukan untuk membetulkan pemaparan isu:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Klip Teks dengan Elipsis dalam Sel Jadual Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!