注記などで改行が入っても文字の頭をそろえる

なんか説明しづらいのでよくわからないタイトルになってしまったorz。タイトルつけるのは難しいです･･･。そんなこんなで今回はちょっとしたCSSの小技のメモです。注記とかでよくある「※･･･」とかいうところで、文章が長くなり改行が入ると文字の頭がずれてちょっとかっこ悪いです。

※注記のテストのですよ。注記のてすとですよ。注記のテストですよ。注記のテストですよ。注記のテストですよ。注記のテストのですよ。

そこでCSSで下記のように指定するとリストマーカーのように最初の一文字分だけが左に飛び出る感じになります。

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

※注記のテストのですよ。注記のてすとですよ。注記のテストですよ。注記のテストですよ。注記のテストですよ。注記のテストのですよ。

と、こんな感じです。覚えておくといつか使うことがあるかもしれない小技です。

http://webtech-walker.com/archive/2007/07/12123938.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。