CSS と HTML を使用して複数行テキストの端にパディングを追加するにはどうすればよいですか?

CSS と HTML を使用して複数行テキストの端にパディングを追加します

非改行スペースを使用せずにこの効果を実現するにはタグを使用すると、CSS と HTML を組み合わせて使用​​できます。こちらです方法:

CSS:

HTML:

Penjelasan:

1. を包みます
   内のテキストテキスト全体を含めるには、「titleContainer」という ID を使用します。
2. テキストを

   で囲みます。タグを付けて、

   全体のスタイルを定義します。ネストされた の場合も同様です。 「見出し」と「小見出し」のクラスを持つ要素。

3. 行分離を作成するには、別の
   を作成します。

   内でそして、line-height、padding、border-left、display でスタイルを設定します。これにより、配置を維持しながら行が分離されます。

4. テキストを で囲みます。クラス「indent」を使用し、position:relativeとleft:-15pxを使用してテキストを左にシフトし、行の先頭に必要なパディングを作成します。
5. クラス「subhead」のサブテキストは次のとおりです。左にフローティングされ、適切な配置を確保するためにマージンを使用して配置されます。
6. Internet Explorer (IE) では、条件付きテキストに含まれる小見出しテキストのマージンを修正するための追加のスタイルが必要です。コメント。

この CSS および HTML ソリューションは、前に提供した Chrome のスクリーンショットに示されているように、テキストの各行の先頭と末尾にパディングを追加する、柔軟でブラウザー間互換性のある方法を提供します。