エントリーアーカイブ

スタイルシートで記号付注釈文を作る

2007/02/26 18:03

先頭に※等の記号付き注釈文が1行で表示しきれず2行以上になってしまった場合、先頭の記号の下にも文字がきてしまい不恰好になる。

不恰好な注釈文

※注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。
注釈文の内容。注釈文の内容。

意図する注釈文

※注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。
　注釈文の内容。注釈文の内容。

(X)HTML

<p class="note">※注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。</p>

CSS

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

padding-leftでp要素全体に対して1文字分余白を取り、text-indentでp要素の先頭行のみを1文字分左に戻す。

※ただし、表示フォントに等幅フォントが指定されている必要があるはず。（未検証）