Question

当我使用css :: first-letter 以下列方式增加字体时：

p:first-letter {
    font-size: 400%;
}

它在段落的第一行和第二行之间创建了一个间隙。能否请您提出解决方案以避免这种差距。

Answer 1

那是因为它们与基线对齐，大字体大小的下降器要高得多。

处理大型首字母的好方法是将它们视为浮动元素（即在文本块内），并将其高度调整为使用的常规字体和字体大小，如下所示： / p>

p:first-letter {
  font-size: 500%;
  float:left;
}

<p class="first-letter">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>

Answer 2

您的问题位于line-height。如果你想知道线高度是如何工作的，我建议你阅读这篇文章：http://joshnh.com/weblog/how-does-line-height-actually-work

＆＃13;

p {
  padding: 15px;
}
p:first-letter {
  font-size: 400%;
  line-height: 0;
  padding-top: 20px;
}

＆＃13;

<p>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. 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.</p>

＆＃13;

CSS首字母格式在第一行和第二行之间创建差距

2 个答案: