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;
}

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

コメント

タイトルとURLをコピーしました