Webtech Walker

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

注記とかでよくある「※・・・」とかいうところで、文章が長くなり改行が入ると文字の頭がずれてちょっとかっこ悪いです。こんな感じ。

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

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

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

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

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

このエントリーをはてなブックマークに追加