CSS过渡高度不影响文本

Question

我已经对一个框应用了高度过渡，但它只影响边框而不是其中的文本。我想让文字随着方框慢慢缩小，如何实现缓慢过渡隐藏文字？

代码：

<div class="test">
this is my test
</div>

css:

.test {
    transition: height 2s, ease-in;
    height: 400px;
    width: 600px;
    border: 1px solid red;
}

    .test:hover{
        height: 1px;
    }

jsfiddle

Answer 1

添加溢出：隐藏；

.test {
    transition: height 2s, ease-in;
    height: 400px;
    width: 600px;
    border: 1px solid red;
    overflow: hidden;
}