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

Cara Menggunakan limpahan teks CSS dalam Sel Jadual

Anda mungkin menghadapi situasi di mana anda ingin memaparkan teks dalam sel jadual , tetapi teks terlalu panjang untuk dimuatkan dengan selesa pada satu baris. Anda ingin menggunting teks dengan elipsis ('...') dan bukannya membenarkannya membalut pada berbilang baris.

Untuk mencapai ini, anda boleh memanfaatkan sifat CSS seperti 'text-overflow' dan 'limpahan'. Walau bagaimanapun, menggunakan 'white-space: nowrap' boleh membawa kepada isu tertentu: teks dan selnya mungkin terus berkembang ke kanan, melangkaui lebar jadual yang dimaksudkan.

Untuk menyelesaikan isu ini, anda perlu menetapkan Harta CSS 'max-width' untuk setiap kelas 'td'. Menetapkan 'max-width' memastikan bahawa gelagat limpahan berfungsi seperti yang dijangkakan:

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

Dalam reka letak responsif, anda boleh menggunakan 'max-width' untuk menentukan lebar minimum lajur. Sebagai alternatif, anda boleh menggunakan 'max-width: 0' untuk fleksibiliti tanpa had. Anda juga harus menetapkan lebar untuk jadual yang mengandungi (cth., lebar: 100%). Tetapkan lebar setiap lajur sebagai peratusan daripada jumlah lebar:

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%;
}

Perhatikan bahawa isu susun atur jadual khusus untuk IE 9 (atau kurang) mungkin memerlukan kod HTML tambahan:

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

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