如何让HTML表格单元格文本换行且不超出指定行高？

可行，但仅靠<tr>的height属性无法直接实现，因为表格行的高度默认会被内容撑开，需要结合单元格的溢出控制属性，通过<tr>统一配置样式来达到需求效果，具体实现如下：

方法一：将单元格转为块级元素实现截断 #

1. 编写CSS样式，通过<tr>的类名统一控制行高及单元格的溢出行为：

.tr-fixed-height {
  height: 20px;
}
.tr-fixed-height td {
  height: inherit; /* 继承<tr>的高度 */
  overflow: hidden; /* 隐藏超出高度的内容 */
  line-height: 20px; /* 让行高与单元格高度匹配，避免内容垂直偏移 */
  display: block; /* 关键：将单元格转为块级元素，触发溢出截断 */
  /* 可选：添加省略号标识截断 */
  text-overflow: ellipsis;
}

2. 对应HTML结构示例：

<table border="1">
  <tr class="tr-fixed-height">
    <td style="background-color: orange;">这是一段会自动换行的长文本，测试超出指定行高后的截断效果</td>
    <td>普通单元格内容</td>
  </tr>
  <tr>
    <td>第二行单元格</td>
    <td>第二行单元格</td>
  </tr>
</table>

方法二：保留表格布局的实现方式 #

如果需要保留表格的列对齐特性，可给表格设置固定布局：

table {
  table-layout: fixed;
  width: 100%;
}
.tr-fixed-height {
  height: 20px;
}
.tr-fixed-height td {
  height: inherit;
  overflow: hidden;
  white-space: normal; /* 明确允许文本自动换行 */
  line-height: 20px;
  /* 可选添加省略号 */
  text-overflow: ellipsis;
}

核心说明 #

• 表格单元格默认是表格布局，overflow属性不会生效，必须通过display: block或table-layout: fixed配合，才能触发溢出截断。
• 通过height: inherit让单元格继承<tr>的高度，实现了用<tr>统一控制行高的需求，无需在单元格内的元素上单独设置高度。

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