溢出隱藏的文本被切斷

所以我工作的這個動畫，其中來自行文字底部向上滑動。代碼的簡化版本可以在這裏預覽：溢出隱藏的文本被切斷

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我嘗試了一種不同的方法。請檢查！ –

溢出隱藏的文本被切斷

回答

相關問題