CODEWITHSUNDEEP
jqueryhtmlcsssass
sdvnksv
sdvnksv

Reputation: 9668

Overflow hidden text gets cut off

So I am working this animation where text slide up from the bottom of the line. A simplified version of the code can be previewed here:

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

Everything works OK, except that a few bottom pixels of the text get cut off. I do understand this happens because of the reduced line height (so please don't mark it as a duplicate of other similar questions), however I do need to keep the line height.

Is there a way to create this kind of animation avoiding text being cut off and keeping the reduced line height?

Upvotes: 2

Views: 1824

Answers (1)

Naren Murali
Naren Murali

Reputation: 56793

You can offset the font by using relative positioning for the span and adjusting the CSS property top:-9px to achieve the required offset.

Idea obtained from the below answer.

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

Upvotes: 1

Related Questions