当第一个字母紧跟一个空格时，如何在浮动后保留一个空格：first-letter？

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 以显示它的工作原理。

Answer 2

以下解决方案保留第一个字符后的空格。

p {
  white-space: pre-wrap;
}

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>

NB：这要求 p 的内部 html 在一行上进行格式化，并且空格对于该行的其余部分是正确的，这样它就不会干扰其余的空白。