jquery - 溢出隐藏文本被切断

Question

所以我正在制作这个动画，其中文本从行的底部向上滑动。可以在此处预览代码的简化版本:

https://codepen.io/Deka87/pen/jGzVvY

HTML:

<div>
    <span>Harley</span>
</div>

CSS:

div {
    overflow: hidden;
    margin-bottom: 1rem;

    > span {
        display: block;
        font-size: 5rem;
        font-weight: bold;
        line-height: 1;
        transform: translateY(100%);
        transition: all .3s;

        &.active {
            transform: translateY(0);
        }
    }
}

除了文本底部的一些像素被截断外，一切正常。我知道这是因为行高降低了(所以请不要将其标记为其他类似问题的重复)，但是我确实需要保持行高。

有没有一种方法可以创建这种避免文本被截断并保持降低的行高的动画？

Answer 1

您可以通过使用 span 的相对定位并调整 CSS 属性 top:-9px 来偏移字体以实现所需的偏移。

从下面的答案中获得的想法。

SO Answer

CSS:

div {
    overflow: hidden;
    margin-bottom: 1rem;

    > span {
        display: block;
        font-size: 5rem;
        top: -9px;
        position: relative;
        font-weight: bold;
        line-height: 1;
        transform: translateY(100%);
        transition: all .3s;

        &.active {
            transform: translateY(0);
        }
    }
}

Codepen Demo