CSSテキストインデントで2行目以降の行頭を字下げする方法

Date：2013/10/20 | カテゴリー

※景品表示法に基づく表記：本記事には商品の広告が含まれています

例えば、
「※注意書きホニャララ・・・」
といった記述に対して、右の画像みたいに2行目以降を自動的に字下げしたいケースってありませんか？

今日はこのようなケースを、text-indentプロパティを上手く使って、実現する方法を紹介したいと思います。

text-indentは、段落１行目の行頭を字下げするプロパティ。
HTML・CSSの記述や実際の表示の例は、以下のとおりです。

◆HTML
<p class=”jisage”>
※注意文とかで２行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。注意文とかで２行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。
</p>

◆CSS
.jisage{
text-indent:1em;
}

◆実際の表示

※注意文とかで２行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。注意文とかで２行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。

スポンサードリンク

で、本題の２行目以降の行頭を自動で字下げしたいときですが、これは全体を１文字分下げて(右に寄せて)おいて、１行目のみをマイナスに字下げすると考えると良いのです。

以下に、実際の記述例を紹介します。

◆CSS
.jisage{
padding-left:1em;
text-indent:-1em;
}

◆実際の表示

ちょっと特殊なケースかもですが、たまに実務で使うこともありますので。

CSSのテキストインデントで2行目以降の行頭を字下げする方法