オーバーフローの隠れたテキストが途切れる

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

すべてが数下のピクセルことを除いて、[OK]を動作しますテキストが途切れてしまいます。私はこれが行の高さの減少のために起こることを理解しています（したがって他の同様の質問と重複しないようにしてください）。しかし、私は行の高さを保つ必要があります。

このようなアニメーションを作成して、テキストが途切れたり、線の高さが低くなったりするのを避ける方法はありますか？

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