溢出隐藏文本被切断

Posted 2023-03-07

【中文标题】溢出隐藏文本被切断

【英文标题】：Overflow hidden text gets cut off

【发布时间】：2018-03-19 22:09:14

【问题描述】：

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

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

一切正常，除了文本的一些底部像素被截断。我明白这是因为行高减少了（所以请不要将其标记为其他类似问题的重复），但是我确实需要保持行高。

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

【问题讨论】：

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

@Mouser，我应该坚持设计，所以较小的字体大小不是一个选项。填充也会增加行之间的空间，这与我试图减少行高的做法相反。

@sdvnksv 你能否分享一下也将出现在显示/隐藏范围内的其他行，以便问题更清楚！

margin-top:-5px;margin-bottom:5px; 在 span 元素上工作正常

@NarenMurali，文字可以是任何文字。这是最终用户将填写内容的模板。我已经添加了几行供你玩。

【参考方案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

【讨论】：

使用这种方法，减少的行高变得毫无用处，因为您通过额外的填充增加了行之间的空间。

@sdvnksv 我尝试了另一种方法。请检查！