CSS响应式文本溢出省略：实现动态宽度截断与布局优化

/* 全局表格样式 */
.global_container.order {
   gap: 12px;
}

.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 {
   width: 35%; /* 确保td有基础宽度 */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px; /* 桌面端默认最大宽度 */
}

/* 针对平板设备的媒体查询 */
@media only screen and (max-width: 1024px) {
    .product_name {
        max-width: 150px; /* 平板端调整最大宽度 */
    }
}

/* 针对移动设备的媒体查询 */
@media only screen and (max-width: 600px) {
    .product_name {
        max-width: 100px; /* 移动端调整最大宽度 */
    }

    /* 在移动端，如果td的布局改变，需要重新考虑ellipsis */
    td {
        display: flex; /* 示例中移动端td变为flex项 */
        width: 100%!important;
        flex-direction: row;
        justify-content: space-between;
    }
    .product_name {
        /* 当td是flex项时，需要确保其内部的a标签能够正确截断 */
        /* 这里的max-width可以被更灵活的方案替代，见方法二 */
        max-width: 150px; /* 再次调整 */
        /* 如果要截断a标签，这里的white-space等可以移除 */
        white-space: unset; 
        overflow: unset;
        text-overflow: unset;
    }
    .product_name > a {
        display: block; /* 确保a标签是块级元素 */
        width: 100%; /* 让a标签占据td的全部宽度 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 在这里不再需要固定的max-width，它会适应父td的宽度 */
    }
}

<table class="table_orders heading">
    <tr class="table_row">
        <td class="product_number">Order ID</td>
        <td class="product_name">Product Name</td>
        <td class="product_data">Date</td>
        <td class="product_price">Total</td>
        <td class="product_status">Status</td>
        <td class="product_action">File</td>
    </tr>
</table>

<table class="table_orders">
    <tr class="table_row_items">
        <td class="product_number">
            <span>#12345</span>
        </td>
        <td class="product_name">
            <a href="#">Product Name is very long long long long long long long long long long long</a>
        </td>
        <td class="product_data">        
            <span>02/08/2022</span>
        </td>
        <td class="product_price">
            <span>Order Total</span>
        </td>
        <td class="product_status">
            <span>Purchuased</span>
        </td>
        <td class="product_action">
            <a href="#">Show</a>
        </td>
    </tr>    
</table>

/* ... (保留大部分基础表格和td样式) ... */

/* 默认的td样式，确保其能作为flex容器的子项 */
.product_name {
    width: 35%; /* 确保td有基础宽度 */
    /* 移除max-width，让其动态适应 */
    /* white-space, overflow, text-overflow 也不再直接应用于td */
}

/* 对td内部的a标签应用省略，并使其动态适应td的宽度 */
.product_name > a {
    display: block; /* 确保a标签是块级元素，可以设置宽度 */
    width: 100%;    /* 让a标签占据父td的全部可用宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 移除固定的max-width，它会根据父td的宽度自动截断 */
}

/* 针对移动设备的媒体查询：当td的布局变为flex时 */
@media only screen and (min-width: 280px) and (max-width: 1024px){
   .table_orders.heading { display: none; }

   /* Items */
   td {
      display: flex; /* 将td设置为flex容器，使其子元素可以水平排列 */
      width: 100%!important; /* td占据父tr的100%宽度 */
      flex-direction: row;
      justify-content: space-between;
  }

   /* product_name td 作为flex item 的处理 */
   .product_name {
      flex-grow: 1;   /* 允许product_name td增长以填充可用空间 */
      flex-shrink: 1; /* 允许product_name td收缩 */
      min-width: 0;   /* 关键：允许product_name td收缩到0，以确保内部a标签能截断 */
      /* 移除所有与文本溢出直接相关的属性，因为它们已移至a