見出しにドロップ キャップ (またはイニシャル キャップ、何と呼んでもよい) の効果を得ようとしています。これが私が達成しようとしていることの例です。
フローティングされたインライン スパン タグで成功を収めましたが、見出しが 2 行目に折り返されると、段落セクションが独自の行に分割されます。例としてこのjsfiddleを参照し、表示ウィンドウを調整して、私が言及している効果を確認してください。http://jsfiddle.net/fEn4U/
最初の 2 つの jsfiddle の例 (h1
とp
タグを使用) の構造は、私が html をどのように使用したいかです。しかし、それが唯一の解決策である場合span
は、p
タグ内で解決できます。ご覧のとおり、span タグと p タグを使用したソリューションよりも、h1、p 構造を使用したソリューションから離れています。
また、コンテナーは固定幅で、その中のコンテンツは動的であるため、見出しが 2 行に分かれたり、1 行のままになったりすることを常に当てにできるとは限りません。