css在悬停时扩展文本

Question

我需要一个默认情况下只显示两行代码的CSS,但是当用户将鼠标悬停在其上时,其余的文本将被显示.

例如 :

它默认情况下应该是这样的:

当用户将鼠标悬停在它上面时应该是这样的:

如您所见,当用户将鼠标悬停在其上时会显示其余文本,但默认情况下,只会显示两行产品名称

什么是css技巧？

谢谢

Answer 1

只需height在元素上设置固定并在悬停时将其重置为默认值.

.special {
    width: 100px;
    height: 30px;
    overflow: hidden;
}
.special:hover { height: auto; }

<div class="special">
    This is very long text This is very long text This is very long text This is very long text This is very long text This is very long text
</div>

如果你也想要动画,请使用max-height.这是一个jsFiddle示例.