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

2024-06-28

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

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

CSSで左上から下に向かって配置するカラムレイアウトを作れる「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で確認できています｡

参考

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

または以下のボタンからなにか買って応援 (PR)

Amazonのアソシエイトとして「けん」は適格販売により収入を得ています。