如何在浮動後保留一個空格：第一個字母的第一個字母后面緊跟一個空格？

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顯示它的工作。