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