表格列宽fit-content自适应 宽度不足时文本ellipsis截断实现问题

解决方案 #

直接给td设置截断规则无法同时适配两种场景，是因为自动布局模式下表格单元格的宽度优先级会优先匹配内容，max-width规则不会生效，我们可以通过增加内层包裹元素实现需求：

完整实现代码 #

<style>
/* 表格基础样式 */
.auto-fit-table {
  width: auto; /* 表格默认随内容撑开宽度 */
  max-width: 100%; /* 限制最大宽度不超过父容器/屏幕宽度 */
  border-collapse: collapse;
}
.auto-fit-table td {
  border: 1px solid #ccc;
  padding: 6px 12px;
}
/* 溢出截断规则 */
.ellipsis-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: fit-content; /* 宽度默认适配内容 */
  max-width: 100%; /* 最大宽度不超过单元格可用宽度 */
}
</style>

<table class="auto-fit-table">
  <tr>
    <td>
      <div class="ellipsis-content">fit cell width to content and truncate text when needed</div>
    </td>
  </tr>
</table>

核心规则说明 #

• 表格设置width: auto保证内容较短时表格/列宽刚好匹配内容宽度，max-width: 100%避免表格超出屏幕宽度
• 所有溢出截断规则加在单元格内的包裹元素上，同时配置width: fit-content和max-width: 100%，即可在内容宽度小于可用宽度时自适应内容，超出可用宽度时自动触发省略截断。

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