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

Limpahan Teks CSS dalam Sel Jadual

Mencapai limpahan teks dalam sel jadual boleh mencabar. Semasa menggunakan limpahan teks: elipsis sahaja mungkin tidak mencukupi, kami boleh menggunakan sifat CSS tambahan untuk mencapai kesan yang diingini.

Penyelesaian

Untuk memotong teks dengan elipsis dan mengelakkan pembalut, kami menetapkan sifat lebar maksimum untuk setiap sel jadual (elemen td). Ini menentukan lebar maksimum yang tersedia untuk teks sebelum ia dipotong. Selain itu, limpahan: tersembunyi memastikan teks berlebihan disembunyikan.

Kod CSS

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

Reka Letak Responsif

Untuk reka letak responsif, sifat lebar maksimum boleh digunakan untuk menentukan lebar minimum lajur yang berkesan. Sebagai alternatif, tetapkan lebar maks: 0; membolehkan fleksibiliti tanpa had. Jadual yang mengandungi harus mempunyai lebar tertentu, biasanya ditetapkan sebagai lebar: 100%;.

Nota Sejarah

Untuk Internet Explorer 9 dan versi terdahulu, tambahan < gaya> teg mesti disertakan dalam HTML untuk menyelesaikan isu pemaparan:

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

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