FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

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

   

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

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

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

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

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

 - CSS