Question

所以我使用::first-letter选择器来增加博客文章中第一个字母的字体大小（标准是什么？）。无论如何，当我这样做时，我得到了这个结果

无论如何，正如你可能知道的那样，我希望文本与身体的其他部分处于同一水平，类似于此

有没有办法实现这个目标？我试过添加边距/填充没有结果。在此之前还曾尝试initial-letter。我可能会破解解决方案，但我不认为这是最好的做法。

CSS

.blog-text {
  line-height: 26px;
  display: inline-block;
}

.blog-text:first-child p::first-letter{
  font-size: 300%;
}

提前致谢

Answer 1

.blog-text:first-child p::first-letter{
  initial-letter: 2;
}

不适用于所有浏览器，请参阅https://caniuse.com/#feat=css-initial-letter。

Answer 2

您可以将float-left用于第一个字母伪元素。由于它仍然会比以下字母略高一点，您可以使用margin-top设置微调实际位置，如下所示。我还建议微调与后续文本大小的字体大小相关的第一个字母的font-size。

.blog-text {
  line-height: 26px;
}

.blog-text:first-child p::first-letter{
  font-size: 56px;
  float:left;
  margin: 6px 3px 0 0;
}

<div class="blog-text">
<p>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. </p>
</div>

Answer 3

为什么不使用自定义跨度类？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Cap span style</title>
<style>
span.dropcap{
  display:block;
  float:left;
  line-height:1em;
  width:48px;
  padding:0;
  text-align:center;
  margin:0 6px 3px 0;
  font-size:300%
}
</style>
</head>
<body>
<p>
<span class="dropcap">W</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>

这会产生合理的边距和对齐方式：

span.dropcap{
  display:block;
  float:left;
  line-height:1em;
  width:48px;
  padding:0;
  text-align:center;
  margin:0 6px 3px 0;
  font-size:300%
}

<p><span class="dropcap">W</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

任何在文本体中嵌入p :: first-letter的方法

3 个答案: