0

text-indentした要素が複数行になった時の左側を揃えたいとき

text-indentした要素が複数行になった時の左側を揃えたいとき

注意事項などの小見出しなどの後に、インデントを付けて説明分を挿入する場合などでtext-indentを用いて字下げをしたりしますが、複数行になる場合に、2行目以降がインデントされずに左寄せになってしまうことがあると思います。

 

そんな時は次のような指定をすればOKです。

 

 

1.まずは、何も指定しない場合のサンプルを見ていきましょう。

HTML

 このように記述した場合は下図のようになります。

s1

※印の真下から説明がはじまってしまっています。

 

2.次にpタグで分けて説明文をインデントさせます。

HTML

 CSS

 すると下図のようになります。

s3

説明文の改行後の先頭が左寄せになっています。

 

3.次にpadding指定を追加します。

HTML

 CSS

 すると下図のようになります。

s2

改行後の文字も字下げされているのでこれでOKですね!

 

p要素に対して逆インデント(-1em)を指定し、先頭のテキスト(ここで言う※注意点)を左に一文字文ずらします。そして、全体に対して、padding-left:1emで左に一文字文の余白を取るという方法です。

ちょっとしたことですが、覚えておくといいかもしれません。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > text-indentした要素が複数行になった時の左側を揃えたいとき