如何使红色div中的文本实际上在div中，以便当其展开时它会显示所有文本？

Question

我一直在尝试制作一个有趣的功能，如果您将光标悬停在红色 div/红色框上，它将使其展开并使用垂直线性过渡显示更多文本。但是，我似乎不知道如何实现它。

我不知道如何表达它来找到帮助我解决问题的结果，所以我来这里寻求一些帮助。

这是该 div 的代码。

.box {
  transform: translatey(-20px);
  background: #9b59b6;
  height: 200px;
  width: 500px;
  line-height: 70px;
  text-align: center;
  color: white;
  font-size: 20px;
}

.key {
  height: 50px;
  width: 600px;
  background: red;
  transition: width 2s, height 2s;
}

.key:hover {
  height: 500px;
}

<div class="box key">
  <h1 ID="super">Trying to put it here</h1>
</div>

Answer 1

就像……这个？我尝试过并且成功了。不过，您可以根据自己的喜好进行编辑。

 <div class="box key">
    <h1 id="super">Trying to put it here
        Trying to put it here
        Trying to put it here
        Trying to put it here
        Trying to put it here
        Trying to put it here
        Trying to put it here
        Trying to put it here
        Trying to put it here
    </h1>
  </div>