0

見出しにドロップ キャップ (またはイニシャル キャップ、何と呼んでもよい) の効果を得ようとしています。これが私が達成しようとしていることの例です。

例

フローティングされたインライン スパン タグで成功を収めましたが、見出しが 2 行目に折り返されると、段落セクションが独自の行に分割されます。例としてこのjsfiddleを参照し、表示ウィンドウを調整して、私が言及している効果を確認してください。http://jsfiddle.net/fEn4U/

最初の 2 つの jsfiddle の例 (h1pタグを使用) の構造は、私が html をどのように使用したいかです。しかし、それが唯一の解決策である場合spanは、pタグ内で解決できます。ご覧のとおり、span タグと p タグを使用したソリューションよりも、h1、p 構造を使用したソリューションから離れています。

また、コンテナーは固定幅で、その中のコンテンツは動的であるため、見出しが 2 行に分かれたり、1 行のままになったりすることを常に当てにできるとは限りません。

4

1 に答える 1

0

inline-block小さなテキストを作成し、最大サイズを設定してみてください。

http://jsfiddle.net/fEn4U/2/

p {
  display: inline-block;
  max-width:150px;
}
于 2013-01-16T17:43:13.110 に答える