如何实现表格单元格长文本截断，鼠标悬停时显示完整内容？

嘿，这有个靠谱的方案能实现你想要的效果——表格里的长文本自动截断显示省略号，鼠标悬停时展示全部内容。我把代码和关键要点整理好了：

核心CSS样式 #

.test {
  width: 100px; /* 固定文本容器宽度，触发截断逻辑 */
  text-overflow: ellipsis; /* 用省略号替代被截断的文本 */
  white-space: nowrap; /* 强制文本保持单行，不自动换行 */
  overflow: hidden; /* 隐藏超出容器范围的内容 */
}

.test:hover {
  overflow: visible; /* 悬停时取消内容隐藏 */
  white-space: normal; /* 恢复正常换行，避免单行过长 */
  height: auto; /* 让容器高度自适应完整内容 */
}

几个关键属性的作用得提一下：

• text-overflow: ellipsis 是实现省略号的核心，但必须配合 white-space: nowrap 和 overflow: hidden 这两个属性一起用才会生效
• 悬停时重置样式，让文本可以正常换行并完整显示，height: auto 能避免容器高度被固定死，导致内容被截断

对应的HTML结构 #

<table>
  <tr>
    <td>
      <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
    </td>
    <td>
      <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
    </td>
    <td>
      <p class="test">This is text that doesn't fit in the container normally, but when you hover over it, you can see the full content without any truncation.</p>
    </td>
  </tr>
</table>

这里有个小细节：我把样式加在了单元格内的<p>标签上，而不是直接给<td>设置样式。这么做是为了避免悬停时整个单元格突然变宽，影响其他列的布局，让交互更流畅。

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