仅用原生HTML/CSS实现表格文本达到max-width后才换行 避免短文本提前折行

你可以通过设置单元格最小宽度为内容不换行宽度的纯CSS方案实现需求，无需后端Java逻辑或前端JS介入，完整修改后的代码如下：

CSS代码 #

/* 表格外层容器，用于触发横向滚动 */
.table-container {
  overflow-x: auto;
}

table {
  border: 1px solid black;
  border-collapse: collapse;
  table-layout: auto;
}

table td,
table th {
  border: 1px solid black;
  max-width: 300px;
  /* 核心：最小宽度等于内容不换行时的宽度，避免短文本被强制压缩折行 */
  min-width: fit-content;
  /* 长文本超出最大宽度时自动折行，支持无空格长文本折行 */
  overflow-wrap: break-word;
  white-space: normal;
}

HTML代码 #

<div class="table-container">
  <table>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
    <tr>
      <td>A</td>
      <td>This is a long text!</td>
      <td>short</td>
      <td>12345678901234567890</td>
    </tr>
    <tr>
      <td>short</td>
      <td>short</td>
      <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
      <td>11111111111111111111</td>
    </tr>
    <tr>
      <td>This</td>
      <td>is</td>
      <td>text!</td>
      <td>09876543210987654321</td>
    </tr>
  </table>
</div>

效果说明 #

• 所有短文本列（包括带空格的短文本）都会自动适配内容宽度，不会提前折行
• 内容长度超过300px的列会固定为300px宽度，内容自动折行不会溢出
• 表格总宽度超过视口宽度时自动出现横向滚动条，不会挤压列宽
• 兼容任意列数、任意文本内容的场景，无需提前预判内容长度

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