CSS 在HTML表格单元格中剪裁长文本，悬停显示完整内容

在本文中，我们将介绍如何使用CSS来剪裁HTML表格单元格中的长文本，并在悬停时展示完整内容。当文本内容过长时，表格单元格往往会被撑开，影响整体布局的美观性。通过使用CSS的clip属性和hover伪类，我们可以实现只显示部分文本并在悬停时显示完整内容的效果。

阅读更多：CSS 教程

CSS Clip属性

clip属性用于定义一个元素的可见区域。对于表格单元格来说，我们可以设置单元格的宽度和高度，然后使用clip属性控制文本的显示。clip属性接受四个参数，分别代表元素可见区域的上边界、右边界、下边界和左边界的位置。这四个参数的值可以是像素值、百分比或auto。在本文中，我们主要关注设置上边界和下边界的值来剪裁表格单元格中的文本。

CSS Hover伪类

hover伪类在鼠标悬停在元素上时触发，可以用于实现当鼠标悬停在表格单元格上时显示完整的文本内容。

使用CSS剪裁长文本

首先，我们需要为表格单元格设置固定的宽度和高度，这样才能控制文本的显示区域。例如，我们可以使用以下CSS样式来定义一个表格单元格的宽度为200像素，高度为50像素：

td {
  width: 200px;
  height: 50px;
}

接下来，我们可以使用clip属性来剪裁表格单元格中的文本，只显示一部分内容。例如，我们可以将上边界的值设为0，下边界的值设为30px，这样就只会显示表格单元格中前30像素的文本了：

td {
  width: 200px;
  height: 50px;
  overflow: hidden;
  clip: rect(0, auto, 30px, auto);
}

通过设置overflow属性为hidden，可以隐藏超出表格单元格区域的文本。clip属性的rect值表示一个矩形区域，前两个参数代表上边界和右边界的位置，后两个参数代表下边界和左边界的位置。使用auto可以让浏览器自动计算边界的位置。

悬停显示完整内容

要实现悬停时显示完整内容的效果，我们可以使用hover伪类来修改clip属性。当鼠标悬停在表格单元格上时，我们将clip属性的值改为默认值，这样完整的文本内容就会显示出来了。

td:hover {
  clip: auto;
}

通过给表格单元格添加:hover伪类，我们可以在悬停时对其进行特殊样式的设置。

示例

下面是一个具体的示例，展示了如何使用CSS剪裁长文本并在悬停时显示完整内容：

<table>
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </td>
  </tr>
</table>

<style>
  td {
    width: 200px;
    height: 50px;
    overflow: hidden;
    clip: rect(0, auto, 30px, auto);
  }

  td:hover {
    clip: auto;
  }
</style>

在上面的示例中，表格单元格中的文本内容过长，但只有前30像素被显示出来。当鼠标悬停在表格单元格上时，完整的文本内容将会显示出来。