html - 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;
}