1. トップページ >
  2. CSS >
  3. 二行目以降だけ行頭1文字分インデント
2013年4月21日

二行目以降だけ行頭1文字分インデント

行頭に黒丸や数字を表示させ、二行目以降を1文字分インデントさせるには、list-styleとmarginやpaddingなんかを使えば簡単に再現できます。但しその行頭の1文字が米印などlist-styleで定義されていない記号等である場合、どのように表現すれば良いでしょうか。画像で作成してbackgroundで指定するのも良いですが、テキスト＋CSSだけでも下記のような表示が可能です。

※米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です

このように「二行目以降だけ行頭1文字分インデント」させるには、下記のようなCSSで再現できます。

p{
padding-left:1em;
text-indent:-1em;
}

例としてpに指定していますが、もちろん他の要素やクラスでも対応できますので、必要に応じて導入されてみてはいかがでしょうか。

関連コンテンツ

「CSS」の最新記事

コメントを残す

メールアドレスが公開されることはありません。