制作のご相談はこちら
改行が入っても文章の始まりを揃えるCSS

2014年12月08日

改行が入っても文章の始まりを揃えるCSS

長い文章のリストを載せる際、下記のような構成がよくあると思います。

例文

<ul class="text">
   <li><span>(1)</span>テキストテキストテキストテキストテキストテキストテキストテキスト<br />テキストテキストテキストテキストテキストテキスト</li>
   <li><span>(2)</span>テキストテキストテキストテキストテキストテキストテキストテキスト<br />テキストテキストテキストテキストテキストテキスト</li>
</ul>

上記の記述だとこのような結果となります。

結果

  • (1)テキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト
  • (2)テキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト

こうやって2行目が(1)の見出し下から始まっています。
2行目もテキストの頭から始まるとより見やすくなりますよね。

そこで一手間、このCSSを追加します。

ul.text{
    margin: 0 0 0 0;
    padding: 0;
    text-indent: -1.4em;
    padding-left: 1.4em;
}

追加するとこのような結果となります。

  • (1)テキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト
  • (2)テキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト

text-indent、padding-leftは文字の大きさによって数値が変化しますので、
都度調節してくださいね。