レスポンシブ テーブルのテキスト オーバーフロー省略記号 (Ellipsis) の幅を動的に制御する

解決策 1: メディア クエリを使用して幅を調整する

最も簡単な解決策は、CSS メディア クエリ (@media) を使用して、さまざまな画面幅に基づいて最大幅の値を調整することです。これにより、開発者は、デバイスの種類 (デスクトップ、タブレット、電話など) ごとに異なる省略記号コンテナの幅を設定できます。

仕組み:

一連のブレークポイントを定義することにより、各ブレークポイント範囲内で、省略記号が適用される要素の適切な最大幅値を指定します。

サンプルコード:

/* グローバル テーブル スタイル*/
.global_container.order {ギャップ: 12px; }
.product_number { 幅: 10%; }
.product_name { 幅: 35%; }
.product_data { 幅: 15%; }
.product_price { 幅: 10%; }
.product_status { 幅: 15%; }
.product_action { 幅: 15%; }

/* テーブルヘッダーのスタイル*/
.table_orders.Heading > tbody > tr > td {
   カラー: #4B525F;
   フォントの太さ: 600;
}
.table_orders.Heading {
   境界線: 実線 #e0e0e0;
   ボーダー幅: 0px 0px 1px 0px;
   パディング: 0px 0px 12px 0px;
   幅: 100%;
}

/*テーブルコンテンツのスタイル*/
.table_orders {
   テキスト整列: 左;
   境界線: 0;
   フォントの太さ: 400;
   色: #737477;
   パディングトップ: 12px;
   幅: 100%;
}
td{ 
   境界線: 0;
   フォントサイズ: 13px;
}

/*デフォルトのデスクトップ省略記号スタイル*/
.製品名 {
   ホワイトスペース: ナラップ;
   オーバーフロー: 非表示;
   テキストオーバーフロー: 省略記号;
   最大幅: 200ピクセル; /*デスクトップのデフォルトの最大幅*/
}

/* メディアクエリ: 画面幅が 1024px 以下の場合 (タブレット) */
@media のみの画面と (最大幅: 1024px) {
  .製品名 {
    最大幅: 150ピクセル; /* タブレットの幅に合わせて調整します */
  }
}

/* メディアクエリ: 画面幅が 600px 以下の場合 (携帯電話) */
@media のみの画面と (最大幅: 600px) {
  .製品名 {
    最大幅: 100ピクセル; /* 携帯電話の幅に合わせて調整します*/
  }
}

/* モバイル端末上でテーブルのレイアウトが変更された場合、たとえば <td> は flex レイアウトに変更されます*/
@media のみの画面と (min-width: 280px) および (max-width: 1024px){
   .table_orders.Heading { 表示: なし; }
   /* ...その他のモバイル レイアウト調整... */

   td{
      ディスプレイ: フレックス;
      幅: 100%!重要;
      フレックス方向: 行;
      コンテンツの位置揃え: 間のスペース;
  }
  /* この場合、省略記号を <a> に適用する必要がある場合は、次のように設定できます: */
  .製品名 > a {
      表示: インラインブロック; /* またはブロック */
      ホワイトスペース: ナラップ;
      オーバーフロー: 非表示;
      テキストオーバーフロー: 省略記号;
      最大幅: calc(100% - 80px); /* 例: td 内の他の要素の幅に応じて動的に調整します*/
      /* または直接 max-width: 100%; </a><a> が唯一のコンテンツで、td を埋めたい場合 */
  }
  /* 現時点では、</a>
</td><td> 独自の省略記号スタイルをキャンセルまたは調整する必要がある場合があります*/
  .製品名 {
      ホワイトスペース: 設定解除;
      オーバーフロー: 設定解除;
      テキストオーバーフロー: 設定解除;</td>