Bagaimana untuk Memotong Teks dengan betul dalam Sel Jadual dengan CSS?

Memotong Teks dalam Sel Jadual dengan CSS Text-Overflow

Dalam reka bentuk web, keperluan untuk mengendalikan teks yang melebihi lebar sel jadual timbul dengan kerap. Menggunakan CSS, anda boleh memotong teks dengan elipsis untuk mengelakkan pembalut sambil mengekalkan reka letak jadual yang ringkas dan teratur.

Masalah: Walaupun terdapat percubaan untuk menggunakan atribut limpahan CSS dan limpahan teks, teks dalam sel jadual terus membalut ke beberapa baris atau mengembang melepasi jadual lebar.

Penyelesaian: Untuk memotong teks dengan elipsis dengan berkesan, anda juga mesti menetapkan sifat lebar maksimum untuk setiap kelas sel jadual (td). Kekangan ini membenarkan teks dipotong pada lebar yang ditentukan.

Berikut ialah kod CSS yang dikemas kini:

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

Untuk memastikan responsif, pertimbangkan untuk menggunakan lebar maksimum: 0px; untuk fleksibiliti lebar tanpa had. Anda juga boleh menetapkan lebar khusus untuk jadual yang mengandungi (biasanya lebar: 100%;) dan mentakrifkan lebar lajur sebagai peratusan daripada jumlah lebar.

Contohnya:

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

Nota: Untuk Internet Explorer 9 atau ke bawah, anda mungkin perlu menambah HTML berikut untuk membetulkan pemaparan isu:

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

Dengan mengikut langkah-langkah ini, anda boleh memotong teks dalam sel jadual dengan elipsis dengan berkesan, memastikan reka letak jadual yang bersih dan terkawal.

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