【CSS】改行が入っても文字の頭をそろえる（2行目以降を1文字下げる）方法
2017/12/15
箇条書きや注釈に「・」や「※」をよく使うと思いますが、改行すると記号が回りこんで埋もれてしまいがちです。
今回は記号ではありませんが、利用規約をHTML化する作業をしていた時に「(1)」などがやはり回りこんでいたのが非常に気になったので、それを回避、揃える方法を備忘録としてポストします。
規約の例
|
1 2 3 4 5 6 7 8 |
<ol> <li>条文の内容テスト条文の内容テスト???とする。 <ul class="inner"> <li><span>(1)</span>条文小内容1条文小内容1???条文小内容1</li> <li><span>(2)</span>条文小内容2条文小内容2???条文小内容2</li> ←(1) </ul> </li> </ol> |
以上のような条文があった場合、(1)が改行すると次のようになってしまいます。
|
1 2 |
(2)条文小内容2条文小内容2条文小内容2条文小内容2条文小内容2 条文小内容2条文小内容2条文小内容2 |
「(2)」をヘッダ記号のようにしたいと思い、CSSを作成。
|
1 2 3 4 5 6 |
ul.inner{ margin: 0 0 0 0; padding: 0; text-indent: -2em; padding-left: 2em; } |
これで、次のようになるはず。
|
1 2 |
(2)条文小内容2条文小内容2条文小内容2条文小内容2条文小内容2 条文小内容2条文小内容2条文小内容2 |