Kawalan Teks Limpahan Teks Dinamik (Ellipsis) Lebar dalam Jadual Responsif

Penyelesaian 1: Gunakan pertanyaan media untuk penyesuaian lebar

Penyelesaian yang paling mudah adalah menggunakan pertanyaan media CSS (@media) untuk menyesuaikan nilai maksimum lebar berdasarkan lebar skrin yang berbeza. Ini membolehkan pemaju menetapkan lebar kontena ellipsis yang berbeza untuk jenis peranti yang berbeza (mis. Desktop, tablet, telefon).

Bagaimana ia berfungsi:

Dengan mendefinisikan satu siri titik putus, dalam setiap julat breakpoint, tentukan nilai maksimum lebar maksimum yang sesuai untuk elemen yang digunakan elips.

Contoh kod:

/* Gaya meja global*/
.global_container.order {Gap: 12px; }
.product_number {width: 10%; }
.product_name {width: 35%; }
.product_data {width: 15%; }
.product_price {width: 10%; }
.product_status {width: 15%; }
.product_action {width: 15%; }

/* Gaya pengepala meja*/
.table_orders.heading> tbody> tr> td {
   Warna: #4B525F;
   Font-Weight: 600;
}
.table_orders.heading {
   Sempadan: pepejal #e0e0e0;
   lebar sempadan: 0px 0px 1px 0px;
   padding: 0px 0px 12px 0px;
   Lebar: 100%;
}

/*Gaya kandungan meja*/
.table_orders {
   Teks-Align: Kiri;
   Sempadan: 0;
   Font-Weight: 400;
   Warna: #737477;
   Padding-top: 12px;
   Lebar: 100%;
}
TD { 
   Sempadan: 0;
   saiz font: 13px;
}

/*Gaya desktop ellipsis lalai*/
.product_name {
   ruang putih: nowrap;
   Limpahan: Tersembunyi;
   Teks-overflow: ellipsis;
   Max-Width: 200px; /*Lebar maksimum lalai pada desktop*/
}

/ * Pertanyaan media: Apabila lebar skrin kurang daripada atau sama dengan 1024px (tablet) */
@media sahaja skrin dan (maksimum lebar: 1024px) {
  .product_name {
    Max-Width: 150px; / * Laraskan agar sesuai dengan lebar tablet */
  }
}

/ * Pertanyaan media: Apabila lebar skrin kurang daripada atau sama dengan 600px (telefon bimbit) */
@media sahaja skrin dan (maksimum lebar: 600px) {
  .product_name {
    Max-Width: 100px; /* Menyesuaikan agar sesuai dengan lebar telefon bimbit*/
  }
}

/* Jika susun atur jadual berubah pada terminal mudah alih, contohnya, <td> perubahan kepada susun atur flex*/
@media sahaja skrin dan (min-lebar: 280px) dan (max-width: 1024px) {
   .table_orders.heading {display: none; }
   / * ... pelarasan susun atur mudah alih lain ... */

   TD {
      Paparan: Flex;
      Lebar: 100%! Penting;
      Flex-arah: baris;
      Justify-Content: Space-antara;
  }
  / * Dalam kes ini, jika ellipsis perlu digunakan untuk <a>, ia boleh ditetapkan seperti ini: */
  .product_name> a {
      paparan: blok sebaris; / * atau blok */
      ruang putih: nowrap;
      Limpahan: Tersembunyi;
      Teks-overflow: ellipsis;
      maksimum lebar: calc (100% - 80px); /* Contoh: Laraskan secara dinamik mengikut lebar unsur -unsur lain di dalam TD*/
      /* Atau secara langsung max-lebar: 100%; Sekiranya </a><a> adalah satu -satunya kandungan dan anda ingin mengisi TD */
  }
  /* Pada masa ini, gaya ellipsis sendiri </a>
</td><td> mungkin perlu dibatalkan atau diselaraskan*/
  .product_name {
      ruang putih: unset;
      Limpahan: Unset;
      Teks-overflow: unset;</td>