隐藏的滚动隐藏了span的文本底部

Question

为了让我的文字被三个小点（...）自动修剪，我已经使用了这个css，它可以很好地工作。

唯一的问题是滚动现在隐藏了我的文本的底部：

<div class="parentDiv">
    <span>
        googlelogo_color_272x92dp.png
    </span>
</div>

CSS：

.parentDiv { 
    position: relative;        
    width: 100%;
}

.parentDiv > span {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;     
    white-space: nowrap;
    vertical-align: middle;
}

这是结果，请注意g在底部被切断：

这是因为overflow: hidden;，如果我将其更改为overflow: auto，我们可以看到滚动隐藏了范围的底部文字。

我如何仍然代表虚线文字而不隐藏底部文本？

Answer 1

尝试添加到＆＃39; .parentDiv＆＃39;填充底部的百分比，可能是5％，但看看哪些适合你

 .parentDiv { 
     position: relative;        
     width: 100%;
     padding-bottom: 5%;
 }

Answer 2

根据其中一条评论，这就是诀窍：

.parentDiv > span {
    padding-bottom: 1px;
}