CSS裁剪底部的字符与行高？

Question

我正在尝试让一个文本字符去触摸它下面的钻孔机。

我没有边距和填充，但有一个间隙，因为字体字符本身似乎在字符下面有空格。

我试着减少行高，但这切开了字符的顶部。我想把字符的底部去掉。这个是可能的吗？

Answer 1

在排版世界中，基线以下的空间被称为下降。不幸的是，你不能使用CSS来调整它。

你能做的就是把你的字符串放在一个div里面。在CSS中设置您想要的height，并设置overflow:hidden;

Demo here

<div class="cutter">
    This a test string
</div>

CSS:

.cutter {
    display:block;
    font-size:24px;
    height:20px;
    overflow:hidden;
}

结果是：

​

​

正如戴在评论中指出的那样，您还可以将文本放置和定位在父容器中，然后应用负的底部边距。

Answer 2

请检查此代码片段，这可能会对您有所帮助！

div {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis; 
}

我把这个提交给了https://www.codegrepper.com/code-examples/css/css+text+truncate+max+height