浮動小数点数の後にスペースを保持する方法：最初の文字の直後にスペースが続く場合、最初の文字？

Question

ドレスキャピタルと2番目の文字との間にスペースを挿入するために、最初の単語が1文字のときに、洗練された解決策（つまり、 をテキストに追加しない）ですか？

段落の最初の文字に改行を追加しようとしています。私が遭遇している問題は、最初の単語がIのように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：これは、それがないように、行の残りのために正しいことを1行と空白にフォーマットするpに内部HTMLを必要とし空白の残りの部分に干渉します。

Answer 2

これは少し難解でしたが、CSSをこれに変更しました。あなたが代わりにvertical-alignに置き換えるので、もし

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

float: left;属性はスペースを削除して、それはスペースを保持し、所望の効果を達成するために先頭にテキストを整列します。

編集

ここan example JSFiddleは作業それを示すことです。