如何防止含短横线的表格单元格自动换行？

核心方案：用CSS直接控制表格单元格，无需flex #

不用折腾flex布局，表格本身有更适配的CSS属性，两步就能搞定需求：

1. 强制日期列不换行
   给日期列的<td>添加以下CSS：

.date-cell {
  white-space: nowrap; /* 强制文本不换行，不受空格/连字符影响 */
  overflow-wrap: normal; /* 禁止在连字符处自动换行 */
  hyphens: none; /* 禁用自动断字（适配现代浏览器） */
}

这个方法比旧的wrap="nowrap"属性靠谱得多，不管文本里是空格还是连字符，都能保持整行显示。

2. 收窄描述列宽度
   给描述列的<td>设置最大宽度，让它优先换行，比如：

.desc-cell {
  max-width: 240px; /* 可根据实际需求调整数值 */
  /* 也可以用百分比适配容器：width: 70%; */
}

浏览器会优先让描述列占用指定宽度，日期列自动适配内容宽度，不会被挤压换行。

完整代码示例 #

<table>
  <thead>
    <tr>
      <th>Description</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="desc-cell">This is a really long description cell with many lines...</td>
      <td class="date-cell">2022-10-12</td>
    </tr>
  </tbody>
</table>

<style>
.desc-cell {
  max-width: 240px;
}
.date-cell {
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

为什么不推荐用flex？ #

如果把表格改成flex布局，会丢失表格原生的单元格对齐、列宽自适应等特性，反而需要额外写大量样式模拟表格行为，完全没必要。用表格自带的CSS控制是最简洁高效的方案。

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