CSSで文字数が可変なインデント（字下げ）をする方法
CSSでインデント（字下げ）をする場合、よく使われるのは、padding-leftとtext-indentを組み合わせたものです。
ただ、文字数が可変する場合、文字ごとにクラスを追加する必要があります。
display:table-cellを使えば、1組のクラスでインデント（字下げ）が可能です。
|
1 2 3 4 |
<p> <span class="noteList">※</span> <span class="noteText">ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。</span> </p> |
|
1 2 3 4 5 6 7 |
.noteList { display: table-cell; white-space: nowrap; } .noteText { display: table-cell; } |
文字数の可変だけでなく、半角全角が混在しても、字下げが揃います。