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示例。

Answer 2

如果您正在寻找一个简单的答案，那么请使用此fiddle

我做的是，创建了p标签并在里面使用了span。在p的悬停上显示跨度，你完成了：）

<强> HTML

    <p>
    This is the test which will be shown up normally
   <span>But if you will hover on the test then this text will also be there./span>
    </p>

<强> CSS

span
  {
     display:none;
  }
p:hover span
  {
     display:block;
  }

Answer 3

最好的方法是使用“overflow：hidden”，然后使用选择“：hover”更改容器的大小。希望这有帮助

Answer 4

您可以（通过固定高度并在悬停时将其延伸一些过渡），如下所示：

＆＃13;

＆＃13;

.extend {
  background-color: cadetblue;
  padding: 5px 5px 5px 5px;
  border-radius: 4px;
  height: 50px;
  width: 25%;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  overflow: hidden;
}
.extend:hover {
  height: 145px;
}

＆＃13;

<div class="extend"> 
  <p>Aliquet suspendisse imperdiet in, class sollicitudin condimentum ante odio! Litora semper arcu, auctor maecenas sodales.</p>
</div>

＆＃13;

＆＃13;

＆＃13;