第一个字母选择器CSS

Question

图像：

在图片中，右边的文字是我需要完成的，左边的文字就是我所拥有的。

有没有人知道这个的好方法。到目前为止，我只尝试过CSS，但我会尝试任何东西。

到目前为止我的CSS是 -

.single-post .spb_text_column p:first-child::first-letter{
font-size: 200%;
font-weight: bold;
vertical-align: -14px;
}

我可以浮动这个字母，这会使文本中的空格消失，但文字仍然没有环绕大字母。如果有人有这个解决方案... Javascript，CSS，甚至Wordpress插件都没问题。感谢。

Answer 1

试试这个：

＆＃13;

＆＃13;

p:first-child:first-letter {
    float: left;
    color: #903;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: Georgia;
}

＆＃13;

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

关于路易斯回答的说明：

您可能想要使字母=（n-1）* lineheight + fontsize的大小，其中n是一个小整数。

因此，例如15 px类型，在18 px行高，你可以使用33 px（2行）48 px（3行）或63 px（4行）

我玩了很长时间。问题：你不能依赖于目标机器上的字体，并且字体的变化会混淆间距 - 它只需要几个px就可以看起来很俗气。

为了使其正常工作，您将不得不覆盖CSS的一些浏览器设置。我还建议使用与段落相同的字体，并仅更改高度，重量和颜色。

我最后走的是另一种方式：保持基线相同，但使用更大的上限。这也从前面的元素创造了更多的空间。这往往在网络演示的草率定义中更好地工作。