リスト(li要素)内のテキストが改行された時にマーカーの下に回り込まないようにする方法

リスト(li要素)内のテキストが改行された時にマーカーの下に回り込まないようにする方法

リスト(li要素)内のテキストが改行された時にマーカーの下に回り込まないようにする方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

li要素でマーカーの位置が「list-style-position:inside;」になっていたり、「list-style-type:none;」でマーカーを消して、::before属性でオリジナルのマーカーをリストに付けた場合、テキストが長くて改行されるとマーカーの下にテキストが回り込んでしまいます。以下のような感じですね。

テキストがマーカーの下に回り込んでしまう

標準のマーカーを使っている場合は、単純に「list-style-position:outside;」を指定すれば、テキストを左側で揃えるように配置されますが、::before属性でオリジナルのマーカーを指定している場合は一工夫必要です。

テキストが折り返しても、以下のようにマーカーの下に回り込まないようにする方法をご紹介したいと思います。

テキストがマーカーの下に回り込まない

スポンサードリンク

リスト内のテキストが改行された時にマーカーの下に回り込まないようにする方法

リスト内のテキストが改行してもマーカーの下に回り込まないようにするためには、リストに対して「text-indent」と「padding」を組み合わせて指定してあげます。


li {
  text-indent: -1.2em;
  padding: 0 0 0 1em;
}

このように、text-indentでマイナスの値、paddingでプラスの値を指定することで、1行目と2行目以降のテキストの先頭が揃うようになります。

細かい値は、実際の挙動を確認しながら微調整してください。普通に考えると両方1emで良さそうですが、両方同じ値にすると、1行目と2行目以降の先頭が微妙にずれてしまいます。

あとがき

特にスマホ対応する場合にテキストが折り返しになることが多いですね。

マーカーの下にテキストを回り込ませたくない場合は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。