html - 具有行高的字符底部的CSS切割？

Question

我试图让一个文本字符触摸它下面的钻孔器。

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

我试图减少行高，但这会削减字符的顶部。我想剪掉字符的底部。这可能吗？

score 4 · Accepted Answer

基线以下的空间在印刷世界中称为下降。不幸的是，您无法使用 CSS 进行调整。

你可以做的是将你的字符串放在一个 div 中。在 CSS 中设置height你想要的，然后设置overflow:hidden;

演示在这里

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

CSS：

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

结果：

以随机高度剪切的文本

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

score 0 · Accepted Answer

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

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