CSS3：break-insideプロパティ

ボックスの途中で、ページ、段、領域をどのように区切るかを設定する。

名前	`break-inside`
値	auto \| avoid \| avoid-page \| avoid-column \| avoid-region
初期値	auto
適用対象	すべての要素 ─ ただし、次に挙げるものは除く：行内レベルのボックス、内部ルビボックス、table column ボックス、table column グループボックス、絶対的に位置されたボックス
継承	されない
百分率	受容しない
算出値	指定されたキーワード
正準的順序	文法に従う
アニメーション型	離散的

このプロパティは、要素の主要ボックス内における［ページ／column／region］分断のふるまいを指定する。各種値は、次を意味する：

auto

主要ボックス内の分断法に追加の拘束を課さない。

<DIV style="column-count:3; width:300px; border:1px solid black;
 font-size:20px;
">
 あああ
 <DIV style="break-inside:auto; border:1px solid red;
 ">いいいいいいいいいい</DIV>
 うううう
</DIV>

avoid

主要ボックス内での分断を、避ける。

<DIV style="column-count:3; width:300px; border:1px solid black;
 font-size:20px;
">
 あああ
 <DIV style="border:1px solid black;
 ">いいいいいいいいいい</DIV>
 うううう
</DIV>

指定なし

<DIV style="column-count:3; width:300px; border:1px solid black;
 font-size:20px;
">
 あああ
 <DIV style="break-inside:avoid; border:1px solid red;
 ">いいいいいいいいいい</DIV>
 うううう
</DIV>

avoid-page

主要ボックス内でのページ分断を、避ける。

avoid-column

主要ボックス内での column 分断を、避ける。

<DIV style="column-count:3; width:300px; border:1px solid black;
 font-size:20px;
">
 あああ
 <DIV style="break-inside:avoid-column; border:1px solid red;
 ">いいいいいいいいいい</DIV>
 うううう
</DIV>

avoid-region

主要ボックス内での region 分断を、避ける。

<DIV style="column-count:3; width:300px; border:1px solid black;
 font-size:20px;
">
 あああ
 <DIV style="break-inside:avoid-region; border:1px solid red;
 ">いいいいいいいいいい</DIV>
 うううう
</DIV>

スクリプト：

スクリプト：

CSS3

プロパティ

break-inside

テスト