フロントの人の雑多メモ

【CSS】columnsプロパティで要素の途中で区切られてしまう時の対処法

【CSS】columnsプロパティで要素の途中で区切られてしまう時の対処法

CSSでカラムレイアウトを作れる「columns」プロパティで、子要素の途中で区切られ折り返されてしまう時の対処法をご紹介します。

そもそも「columns」プロパティについては以下をご覧ください。

目次

何が起こったか

以下のようなHTMLで

<ul>
	<li>この文章はダミーです。</li>
	<li>この文章はダミーです。</li>
	<li>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</li>
	<li>この文章はダミーです。</li>
</ul>

3カラムにすると

ul {
	columns: 3;
}

3つ目のliが途中で区切られ、次のカラムへ入り込んでしまいます。

  • この文章はダミーです。
  • この文章はダミーです。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。

一応スクショも置いておきます。

対処法

columnsの子要素に以下を指定します。

ul li {
	break-inside: avoid-column;
}

すると解消されました。

  • この文章はダミーです。
  • この文章はダミーです。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。

break-inside: avoid-column; 見たことも聞いたことも無いプロパティですが、記事執筆時点ではChrome、Edge、Safari、Firefoxで確認できています。

参考

html - How to prevent column break within an element? - Stack Overflow

Can I use

コメント

内容を確認の上、個人情報などは省いて掲載させていただきます。

お名前・メールアドレスも入力する

メールで返信がほしい場合に入力してください。

頂いた個人情報は開示しません。返信のためだけに利用いたします。

直接送信されます。確認の上、「送信」してください。

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る

シェア

Twitterでシェア Facebookでシェア LINEでシェア はてなブックマークでシェア

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る