如何在浮动后保留一个空格：第一个字母的第一个字母后面紧跟一个空格？

Question

什么是优雅的解决方案（即在不添加 的情况下），在第一个单词是单个字母时，在首字母和第二个字母之间引入一个空格？

我试图添加首字母的段落首字母大写。我遇到的问题是，如果第一个单词是1个字母的单词，如我，它导致后面的空间消失，它看起来很混乱。

下面是一个例子：

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

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

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：这需要内部HTML到p一个线和空白是正确的行的其余部分被格式化，所以它不干扰其余的空白。

Answer 2

这有点棘手，但要改变你的CSS。

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

的float: left;属性被移除的间距，所以如果你有vertical-align取代它，相反，它保持了空间和对齐文本顶端达到预期的效果。

编辑

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