css - CSS中的前导与行高

Question

所以在传统的页面布局程序中，当你做前导时，它不会影响段落的第一行。但是，如果你在 CSS 中使用 line-height，无论你的数字是多少，都会影响第一行。有没有办法模仿 CSS 中的桌面领先？基本上，我只想让 line-height 应用于后续行，而不是第一行。

Answer 1

您可以尝试以下方法：

.class {
    line-height: 1.5;
}
.class::first-line {
    line-height: 1;
}

/* If legacy browsers must be supported */
.class:first-line { 
    line-height: 1;
}

https://developer.mozilla.org/en-US/docs/CSS/::first-line

http://reference.sitepoint.com/css/pseudoelement-firstline

Answer 2

我想到了。我可以通过设置负边距顶部来执行传统的“领先”，如下所示：

h3 { 
color: #fff;
font-weight: normal;
padding-bottom: 0px;
font-size: 24px;
line-height: 22px;
margin-top:-1px;
}