Html 在文本体中嵌入p:：第一个字母的任何方法_Html_Css_Sass

Html 在文本体中嵌入p:：第一个字母的任何方法

html css sass

Html 在文本体中嵌入p:：第一个字母的任何方法,html,css,sass,Html,Css,Sass,因此，我使用：：first letter选择器来增加博客文章中第一个字母的字体大小（标准ish？）。无论如何，当我这样做的时候，我得到了这个结果无论如何，正如你可能知道的，我希望文本与正文的其他部分处于同一水平，类似于此有没有办法做到这一点？我尝试过添加边距/填充，但没有结果。在此之前也尝试过首字母。我可能会破解一个解决方案，但我认为这不是最佳实践 CSS .blog-text { line-height: 26px; display: inline-block; } .blo

因此，我使用

：：first letter

选择器来增加博客文章中第一个字母的字体大小（标准ish？）。无论如何，当我这样做的时候，我得到了这个结果

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

有没有办法做到这一点？我尝试过添加边距/填充，但没有结果。在此之前也尝试过

首字母

。我可能会破解一个解决方案，但我认为这不是最佳实践

CSS

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

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

提前谢谢

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

但并非在所有浏览器上都可用，请参阅

但并非在所有浏览器上都可用，请参见。

您可以对第一个字母伪元素使用

左浮动。由于它仍将略高于以下字母，因此您可以使用边距顶部设置微调实际位置，如下所示。我还建议根据后续文本大小的字体大小对第一个字母的字体大小进行微调

.blog文本{
线高：26px；
}
.blog文本：第一个孩子p：：第一个字母{
字体大小：56px；
浮动：左；
利润率：6px 3px 0；
}

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子
您可以对第一个字母伪元素使用左浮点
。由于它仍将略高于以下字母，因此您可以使用边距顶部设置微调实际位置，如下所示。我还建议根据后续文本大小的字体大小对第一个字母的字体大小进行微调

.blog文本{
线高：26px；
}
.blog文本：第一个孩子p：：第一个字母{
字体大小：56px；
浮动：左；
利润率：6px 3px 0；
}

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子
为什么不使用自定义的span类
<!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类
<!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>

我们的世界是一片光明，一片光明，一片光明，一片光明。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔不自卑，还必须为自己的行为负责。
你有没有尝试过浮动：左
？直到现在都没有。回答一下，我就接受，谢谢！您是否尝试过浮动：左
？现在还没有。回答一下，我就接受，谢谢！看起来只有safari很酷，如果你不介意的话，添加关于使用float left的替代解决方案看起来只有safari很酷，如果你不介意的话，添加关于使用float left的替代解决方案