如何为表格中max-height的变化添加平滑过渡动画？

我给表格每个<td>下的<span>设置了max-height: 60px的高度限制，要求鼠标悬停任意单元格时，该行所有<span>显示完整内容。由于max-height在<tr>上不生效，所以采用了<td>嵌套<span>的结构。但尝试用CSS transition给max-height的变化加平滑过渡时完全没效果，想问这个需求是否可行，具体该怎么实现？

这个需求完全可行，问题核心在于CSS transition无法在具体数值和none之间生成动画——你之前用max-height: none触发过渡，这不符合transition的生效条件，必须用具体数值区间来实现过渡效果。

关键修改步骤： #

1. 替换max-height: none为足够大的具体数值：比如max-height: 500px，确保能覆盖所有单元格内容的最大高度
2. 优化文本截断逻辑：用-webkit-line-clamp配合-webkit-box精准控制默认显示行数，避免纯max-height可能出现的文本截断不整齐问题
3. 优先用CSS实现hover效果：直接通过tr:hover控制该行所有<span>的样式，无需JS绑定大量事件，代码更简洁高效

修改后的完整代码： #

HTML（修正原代码中<tr>标签的闭合错误）

<table>
  <tr>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
  </tr>
  <tr>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
  </tr>
  <tr>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
}

td>span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  max-height: 60px;
  /* 文本截断控制 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 对应60px高度的行数，可根据需求调整 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

/* 鼠标悬停该行时，展开所有span */
tr:hover td>span {
  max-height: 500px; /* 足够大的数值，确保覆盖所有内容高度 */
  display: block; /* 关闭-webkit-box截断模式 */
  text-overflow: initial; /* 恢复文本溢出默认行为 */
}

额外说明： #

• 如果一定要用JS控制（比如有特殊交互逻辑），可以绑定<tr>的mouseenter/mouseleave事件，给行添加/移除类名，再通过类名控制样式，避免给每个<span>绑定事件，提升性能
• max-height的过渡时长可以根据需求调整，比如0.3s会更流畅
• 若内容高度差异极大，也可以用JS动态计算每个<span>的真实高度，悬停时设置为该高度，过渡效果会更精准，但实现成本更高，一般用固定大数值足够满足需求

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