Question

我想创建一个固定宽度的表，它可能在一个td中包含长字符串。但是我不希望它在显示时变成另一条线。

当用户将鼠标悬停在td所在的行上时，我希望它显示完整的内容。

平滑过渡效果在我所做的例子中。我希望在不设置固定高度的情况下实现这种效果。

这是我的代码：

<table>
    <tr>
        <td>This is a testing Message that longer than the td</td>
        <td>This is a testing Message that longer than the td</td>
        <td>This is a testing Message that longer than the td</td>
    </tr>
    <tr>
        <td>This is a testing Message that longer than the td</td>
        <td>This is a testing Message that longer than the td</td>
        <td>This is a testing Message that longer than the td</td>
    </tr>
    <tr>
        <td>This is a testing Message that longer than the td</td>
        <td>This is a testing Message that longer than the td</td>
        <td>This is a testing Message that longer than the td</td>
    </tr>
</table>

CSS：

table{
  table-layout:fixed;
  width:300px;
  border:1px solid black;
  padding:0;
  margin:0;
}

table tr td{
  margin:0;
  white-space:nowrap;
  border:1px solid red;
  overflow:hidden;
  text-overflow:ellipsis;
  height:25px;
  transition:all 0.3s ease;
}

table tr td:nth-child(1),table tr td:nth-child(2){
  width:30%;
}
table tr td:nth-child(2){
  width:40%;
}

table tr:hover td{
  white-space:normal;
  border:1px solid red;
  overflow:visible;
  text-overflow:inherit;
  height:150px;
}

我希望其Here

的效果

但是，如果我想要这种平滑的过渡效果，我必须为td设置一个固定的高度。但我希望的结果是td将根据内容长度（内容包裹多少行）进行扩展。

希望有人可以帮助我，谢谢

Answer 1

在css中使用min-height属性而不是height，以便它可以根据内容增加。

你可以尝试这个例子： enter link description here

我想实现从nowrap到normal的Smoothy过渡

1 个答案: