CSS

CSSで文字数が可変なインデント（字下げ）をする方法

CSSでインデント（字下げ）をする場合、よく使われるのは、padding-leftとtext-indentを組み合わせたものです。

ただ、文字数が可変する場合、文字ごとにクラスを追加する必要があります。

display:table-cellを使えば、1組のクラスでインデント（字下げ）が可能です。

文字数が可変なインデント（字下げ）のサンプル

<p>
  <span class="noteList">※</span>
  <span class="noteText">ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。ここに文字がはいります。</span>
</p>
.noteList {
  display: table-cell;
  white-space: nowrap;
}
.noteText {
  display: table-cell;
}

文字数の可変だけでなく、半角全角が混在しても、字下げが揃います。

-CSS