仅使用CSS在每行之前添加行高

Question

我正在尝试编写一些CSS来增加文本行之间的间距。显然，这是通过CSS line-height属性完成的。但是，由于我想将相同的文本样式应用于所有内容（为了尽量减少“特殊情况”样式），我希望仅在文本足够长以包裹到多行时才应用此属性。

我差不多按照我喜欢的方式工作，使用类似的东西：

p
{
    line-height: 2em;
}

p:first-line
{
    line-height: normal;
}

唯一突出的问题是，因为增加line-height会在每行的上方上方添加空间，并且因为第一行line-height为normal，第1行和第2行之间以及任何两行之间的间距看起来不同。

如何增加line-height，以便额外的空间只显示 每行？我认为vertical-align: bottom;可能会这样做，但没有运气。

我试图用这个here进行试验。

为了让我想要的更清楚，这里有一些照片。这是我将line-height: 2em;简单地应用于p代码时获得的结果：

虽然这是我想要实现的目标 - 请注意额外空间仅在行之间出现，而不是在行之前或之后：

通过使用line-height来实现这一点，然后调整第一行之前的空格以及带有负边距的最后一行之后的空间并不能真正做到我想做的事情。它有点像黑客，如果段落有任何其他样式（如边框，或背景颜色等），那么很明显文本行仍然太大，段落本身就是设置允许事物重叠那个额外的空间。

Answer 1

嗯...我觉得行高不可能，也就是说我不认为你可以用line-height css属性来控制它。您无法控制上方与下方的线高。如果您还没有，请参阅此similar question。

我认为最好的办法是使用div包装器。这样你就可以放置任何必要的边框而不会遮挡它们。如果将其与具有负顶部和底部边距的内部包装结合使用，则可以获得所需的结果（有关完整示例，请参阅here。）：

<div class="container"><p class="increased">
<span class="line">This is a really long line that will wrap inside this particular div a couple of times to demonstrate "uneven" line spacing.</span>
</p></div>

 div {
background-color: #CCC;
width: 300px;
}
.container {
border:1px solid black;
margin:0px;
padding:0px;
margin-bottom:5px;
}
.increased {
margin-top:-1.4em;
margin-bottom:-1.4em;
padding:0px;
}
.line {
     line-height: 4em;
   background-color: #FFC;
 }
.increased:first-line {
color:blue;
line-height:normal;
}

Answer 2

要删除第一行上方的额外空格，请使用

p {
  margin-top: -1.8em;
}