Question

我有这段代码，

＆＃13;

p.quote span {
  font-size: 50px;
}

＆＃13;

<p class="quote"><span>&ldquo;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.<span>&rdquo;</span>
</p>

＆＃13;

https://jsfiddle.net/ce9ej08s/

我不希望段落行高度为50，是否有办法将段落的最后一行放在一起？就像有没有办法在单独的元素中使用引号，所以引号的大小不会改变段落的行高？

Answer 1

您可以使用垂直对齐和线高的组合：

p.quote span {
    font-size: 50px;
    line-height: 0px;
    vertical-align: bottom;
}

这将正确设置引号的样式。

jsFiddle：https://jsfiddle.net/ce9ej08s/2/

Answer 2

您可以通过操纵引号的vertical-align属性来完全消除间隙。

https://jsfiddle.net/ce9ej08s/1/

将第一个引号与底部对齐，这将使第一行文本的基线向下移动，并将第二个引号与顶部对齐，这将使最后一行文本的基线与其对齐。

p.quote span
{
  vertical-align: bottom;
}

p.quote span.end
{
  vertical-align: top;
}

没有差距！

Answer 3

基于上述poushy的回答，我做了一些修改，希望它会有所帮助。

 p.quote span {
  font-size: 50px;
  line-height: 0px;
  vertical-align: bottom;
  display: inline-block;
  padding:15px;
}
p{
  line-height:35px;
}

jsFiddle：https://jsfiddle.net/862751557gin/0jajczjk/

CSS单独的字体大小和行高

3 个答案: