CSS - break-inside

トップ > CSSリファレンス > break-inside

概要

属性名 break-inside
auto | avoid | avoid-page | avoid-column | avoid-region
初期値auto
適用可能要素ブロックレベル要素
継承継承しない
メディアpaged

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS31010.1

説明

page-break-inside を拡張する属性として CSS3 で追加定義されました。印刷時の改ページに加え、columns によるマルチカラムにおける改カラムを制御します。

説明
auto改ページ/改カラムをブラウザの判断に任せます。
avoid改ページ/改カラムを禁止します。
avoid-page改ページを禁止します。
avoid-column改カラムを禁止します。
avoid-region改リージョンを禁止します。

例えば下記の例で、段落2 に対して break-inside: avoid-page を指定すると、右図のように 段落2 の途中での改ページが禁止されます。

Page.1 Page.2 Page.1 Page.2
段落1:ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
ああああああああああ
段落2:ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああ
段落3:ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああ
段落1:ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
ああああああああああ
段落2:ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああ
段落3:ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああ

例えば下記の例で、段落2 に対して break-inside: avoid-column を指定すると、右図のように 段落2 の途中での改カラムが禁止されます。

段落1:あああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
段落2:あああ
ああああああああ
ああああああああ
ああああああああ
段落3:あああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
段落1:あああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
段落2:あああ
ああああああああ
ああああああああ
ああああああああ
段落3:あああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ

使用例

CSS
.multicol {
  column-count: 3;
}
.multicol p {
  break-inside: avoid-column;
}
HTML
<div class="multicol">
  <p>段落1:あああああああ・・・</p>
  <p>段落2:あああああああ・・・</p>
  <p>段落3:あああああああ・・・</p>
</div>

関連項目

colums, break-before, break-after, page-break-before, page-break-after, page-break-inside

リンク


Copyright (C) 2015 杜甫々
初版:2015年10月25日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/break-inside.htm