响应式表格中动态控制文本溢出省略号（Ellipsis）宽度

/* Table Width */
.product_name { width: 35%; } /* 单元格宽度 */

/* Text Ellipsis */
.product_name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px; /* 固定最大宽度，这是问题的根源 */
}

/* 移动端媒体查询中的尝试，但依然使用了固定宽度 */
@media only screen and (min-width: 280px) and (max-width: 1024px){
   .product_name { /* 在移动端取消了 <td> 的省略号样式 */
      white-space: unset;
      overflow: unset;
      text-overflow: unset;
      max-width: unset;
   }

   .product_name > a { /* 转而在 <a> 元素上应用省略号，但仍是固定的 max-width */
      text-align: right;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 200px; /* 依然是固定宽度 */
  }
}

<table class="table_orders">
    <tr class="table_row_items">
        <td class="product_name">
            <a href="#">Product Name is very long long long long long long long long long long long</a>
        </td>
        <!-- 其他表格数据 -->
    </tr>    
</table>

/* 全局表格样式 */
.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%; }

/* 表格头部样式 */
.table_orders.heading > tbody > tr > td {
   color: #4B525F;
   font-weight: 600;
}
.table_orders.heading {
   border: solid #e0e0e0;
   border-width: 0px 0px 1px 0px;
   padding: 0px 0px 12px 0px;
   width: 100%;
}

/* 表格内容样式 */
.table_orders {
   text-align: left;
   border: 0;
   font-weight: 400;
   color: #737477;
   padding-top: 12px;
   width: 100%;
}
td { 
   border: 0;
   font-size: 13px;
}

/* 默认桌面端省略号样式 */
.product_name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px; /* 桌面端默认最大宽度 */
}

/* 媒体查询：当屏幕宽度小于或等于 1024px 时 (平板) */
@media only screen and (max-width: 1024px) {
  .product_name {
    max-width: 150px; /* 调整为适合平板的宽度 */
  }
}

/* 媒体查询：当屏幕宽度小于或等于 600px 时 (手机) */
@media only screen and (max-width: 600px) {
  .product_name {
    max-width: 100px; /* 调整为适合手机的宽度 */
  }
}

/* 如果在移动端表格布局发生变化，例如 <td> 变为 flex 布局 */
@media only screen and (min-width: 280px) and (max-width: 1024px){
   .table_orders.heading { display: none; }
   /* ... 其他移动端布局调整 ... */

   td {
      display: flex;
      width: 100%!important;
      flex-direction: row;
      justify-content: space-between;
  }
  /* 在这种情况下，如果省略号需要应用在 <a> 上，可以这样设置： */
  .product_name > a {
      display: inline-block; /* 或 block */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100% - 80px); /* 示例：根据 td 内部其他元素的宽度动态调整 */
      /* 或者直接 max-width: 100%; 如果 <a> 是唯一内容并希望占满 td */
  }
  /* 此时 <td> 自身的 ellipsis 样式可能需要取消或调整 */
  .product_name {
      white-space: unset;
      overflow: unset;
      text-overflow: unset;