css - :first-letter when the first letter is immediately followed by a space? float 后如何保留空格

Question

什么是优雅的解决方案(即不向文本添加  )，当第一个单词是单个字母时，在首字母和第二个字母之间引入一个空格？

我正在尝试在段落的第一个字母上添加首字母大写。我遇到的问题是，如果第一个单词是 1 个字母的单词(例如 I)，它看起来很困惑，这会导致后面的空格消失。

例子如下:

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

<p>Some text.</p>

<p>
    I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text.
</p>

解决方案必须保持行与行之间的行高相同，方法与 float: left 相同。

Answer 1

这有点难以理解，但请将您的 CSS 更改为这个。

p::first-letter {
  font-size: 150%;
  vertical-align: text-top;
}

float: left; 属性删除了间距，因此如果您将其替换为 vertical-align，它会保留空格并将文本对齐到顶部达到预期的效果。

编辑

这里是 an example JSFiddle展示它的工作。