如何在动态宽度的响应式表格中使用text-overflow: ellipsis？

要实现在表格自适应分配的单元格宽度处用省略号截断长文本、保持单行且不撑爆容器的效果，关键是让单元格宽度由表格布局自动分配，而非被超长内容强制撑开。可以通过以下方案修改代码：

核心思路 #

• 限制包含长文本的单元格，使其遵循表格的自适应宽度规则，不被内容拉伸
• 让内部文本容器在单元格的自适应宽度范围内，实现单行截断并显示省略号

修改后的代码 #

CSS 部分 #

section {
  background: green;
  padding: 50px;
}

table {
  background: white;
  width: 100%;
  border-collapse: collapse;
}

/* 定位包含长文本的单元格，强制其遵循表格自适应宽度 */
.truncate-cell {
  max-width: 0;
}

.truncateme {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

HTML 部分 #

<section>
  
<table border="1">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
    <th>Column 7</th>
    <th>Column 8</th>
    <th>Column 9</th>
    <th>Column 10</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Orange</td>
    <td>Banana</td>
    <td>Strawberry</td>
    <td>Grapes</td>
    <!-- 给目标单元格添加类名 -->
    <td class="truncate-cell">
      <div class="truncateme">This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap.</div>
    </td>
    <td>Watermelon</td>
    <td>Peach</td>
    <td>Mango</td>
    <td>Kiwi</td>
  </tr>
  <tr>
    <td>Carrot</td>
    <td>Broccoli</td>
    <td>Tomato</td>
    <td>Cucumber</td>
    <td>Spinach</td>
    <td>Potato</td>
    <td>Eggplant</td>
    <td>Cabbage</td>
    <td>Cauliflower</td>
    <td>Pepper</td>
  </tr>
  <tr>
    <td>Pear</td>
    <td>Cherry</td>
    <td>Blueberry</td>
    <td>Blackberry</td>
    <td>Raspberry</td>
    <td>Melon</td>
    <td>Lemon</td>
    <td>Lime</td>
    <td>Coconut</td>
    <td>Papaya</td>
  </tr>
  <tr>
    <td>Lettuce</td>
    <td>Onion</td>
    <td>Garlic</td>
    <td>Ginger</td>
    <td>Zucchini</td>
    <td>Kale</td>
    <td>Radish</td>
    <td>Beetroot</td>
    <td>Brussels Sprouts</td>
    <td>Asparagus</td>
  </tr>
  <tr>
    <td>Apricot</td>
    <td>Plum</td>
    <td>Nectarine</td>
    <td>Pomegranate</td>
    <td>Fig</td>
    <td>Avocado</td>
    <td>Guava</td>
    <td>Passion Fruit</td>
    <td>Starfruit</td>
    <td>Lychee</td>
  </tr>
</table>
  
</section>

原理说明 #

1. .truncate-cell { max-width: 0; }：给目标单元格设置max-width:0后，单元格会放弃被内容撑开的优先级，转而遵循表格的自适应宽度分配（和未设置nowrap时的宽度完全一致）。
2. .truncateme的样式：将容器设为块级并占满单元格宽度，通过white-space: nowrap强制文本单行显示，overflow: hidden隐藏超出单元格宽度的内容，text-overflow: ellipsis在截断处显示省略号，完美匹配预期效果。

如果你的浏览器支持CSS :has()选择器，也可以不用给单元格加类名，直接用td:has(.truncateme) { max-width: 0; }来定位目标单元格，进一步简化HTML结构。

内容的提问来源于stack exchange，提问作者WackGet