如何在浮动后保留 space :first-letter 当第一个字母紧跟 space 时？

Question

什么是优雅的解决方案（即不在文本中添加  ），当第一个单词是单个字母时，在首字母和第二个字母之间引入 space？

我正在尝试向段落的第一个字母添加首字母大写。我遇到的问题是，如果第一个单词是 1 个字母的单词，比如 I，它看起来很混乱，这会导致后面的 space 消失。

示例如下：

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，它会保留 space 并将文本与顶部对齐以达到预期效果。

编辑

这里是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 格式化为一行，其余部分的空格正确行，这样它就不会干扰其余的空白。

如何在浮动后保留 space :first-letter 当第一个字母紧跟 space 时？

How to retain a space after floated :first-letter when the first letter is immediately followed by a space?

css

typography