溢出隐藏的文本被切断

所以我工作的这个动画，其中来自行文字底部向上滑动。代码的简化版本可以在这里预览：溢出隐藏的文本被切断

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

一切工作正常，除了的几个底部像素文字被切断。我知道这是因为行高减小（所以请不要将它标记为其他类似问题的重复），但是我确实需要保持行高。

有没有一种方法来创建这种动画避免文本被切断，并保持降低行高？

来源

2017-10-08 sdvnksv

较小的字体大小可以工作，或填充。 – Mouser

@Mouser，我应该坚持设计，所以smalller字体大小不是一个选项。填充也会增加线条之间的空间，这与我尝试实现减小线条高度相反。 – sdvnksv

@sdvnksv可否请您共享其他线路也将陆续显示/隐藏跨度内，从而使问题更加清晰！ –

您可以通过使用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

来源

2017-10-08 17:26:55

使用这种方法，可以减小行高度，因为您可以通过增加填充来增加行间距。 – sdvnksv

@sdvnksv我尝试了一种不同的方法。请检查！ –

溢出隐藏的文本被切断

回答

相关问题