我想实现一个从nowrap到normal的平滑转换

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