2行目以降を1文字下げるCSS

更新日：2015年9月1日

箇条書き（・や①やa等）や注意書き（※）が文章の最初に入っている場合、改行時に文章がそれらの記号の下に回り込んでしまいますよね。改行の度に<br>を入れて、次の行の文頭に無理やりスペースを入れても見た目の上では変わらないのですが、スマートじゃないと感じる方もいるのではないでしょうか？

何より強制的に<br>を使って改行させる場合はともかくとして、文字が幅いっぱいになった時に自然に改行されるパターンの場合は、次の行の文頭が何処になるかの予測がつかない為、そもそも無理やりスペースを入れる方法は使えません。
閲覧するブラウザの種類によって改行位置は変わりますからね。

しかし実はその悩み、たった2行のCSSで解決出来ます。

HTMLは以下のように記述。

※2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。2行目以降1文字下げます。

CSSは以下のように記述します。

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

これだけで解決。

何かと使いどころの多いCSSですので、覚えておいて損はないかと思います。