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

Question

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

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

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

Answer 1

那是因为它们按基线对齐，大字体的下行部分要高得多。

处理大首字母的一个好方法是将它们视为 float 元素(即 在 文本 block 中)并将它们的高度调整为使用的常规字体和字体大小，如下所示:

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>