如何在HTML表格列中实现单行文本截断并支持用户点击展开剩余内容

没问题，我来帮你搞定这个需求！要让表格单元格里的文本保持单行显示，超出部分自动隐藏，点击后展开全部内容，咱们可以通过 CSS + JavaScript 结合实现，下面是具体步骤和修改后的完整代码：

1. 修正基础样式问题 #

你原来的代码里有几处CSS语法错误，比如word-wrap后面没加分号，还有white-space: pre会保留文本换行，和单行需求冲突。首先要调整这些样式：

• 给表格添加table-layout: fixed，确保列宽固定不会被内容撑开
• 给需要截断的单元格设置white-space: nowrap（强制单行）、overflow: hidden、text-overflow: ellipsis（显示省略号）

2. 添加展开/收起的HTML结构 #

在包含长文本的<td>里，把文本放在一个专属容器中，再添加一个切换按钮，方便用户触发展开操作。

3. 实现JavaScript交互逻辑 #

通过监听按钮点击事件，切换文本容器的显示状态，同时更新按钮文字。

完整代码示例 #

<table style="border-style: solid; border-color: #000708; background-color: #000708; table-layout: fixed;" border="3">
  <tbody>
    <tr bgcolor="#18C1C1">
      <td style="text-align: center; width: 107.588px;"><strong>Tree</strong></td>
      <td style="text-align: center; width: 84.275px;"><strong>ID</strong></td>
      <td style="text-align: center; width: 81.975px;"><strong>S</strong></td>
      <td style="text-align: left; width: 3899.98px;"><strong>Text</strong></td>
      <td style="text-align: center; width: 158.688px;"><strong>Name</strong></td>
    </tr>
    <tr>
      <td style="width: 107.588px;">113</td>
      <td style="width: 84.275px;">113</td>
      <td style="width: 81.975px;">0</td>
      <td style="width: 3899.98px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;">
        <span class="text-content">This is a test and this should not expand after a fixed length --?></span>
        <button class="toggle-btn" style="margin-left: 8px; font-size: 12px;">展开</button>
      </td>
      <td style="width: 158.688px;">Test</td>
    </tr>
  </tbody>
</table>

<script>
// 获取所有切换按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const textContent = this.previousElementSibling;
    const isTruncated = textContent.style.overflow !== 'visible';
    
    if (isTruncated) {
      // 展开状态：取消截断，显示全部内容
      textContent.style.overflow = 'visible';
      textContent.style.textOverflow = 'unset';
      this.textContent = '收起';
    } else {
      // 收起状态：恢复截断
      textContent.style.overflow = 'hidden';
      textContent.style.textOverflow = 'ellipsis';
      this.textContent = '展开';
    }
  });
});
</script>

说明 #

• 表格设置table-layout: fixed后，列宽会严格按照你设置的width值显示，不会被长文本撑开
• 文本容器默认保持单行截断，点击按钮后会切换为overflow: visible，显示全部内容，同时按钮文字变为“收起”
• 如果有多个长文本单元格，这个JS逻辑会自动处理所有带.toggle-btn的按钮

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