CSS - break-before

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

概要

属性名 break-before
auto | always | avoid | left | right | page | column | avoid-page | avoid-column
初期値auto
適用可能要素ブロックレベル要素
継承継承しない
メディアpaged
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS31010.1-12.1

説明

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

説明
auto改ページ/改カラムをブラウザの判断に任せます。
always常に改ページします。
page常に改ページします。(always と同じ)
column常に改カラムします。
avoid改ページ/改カラムを禁止します。
avoid-page改ページを禁止します。
avoid-column改カラムを禁止します。
left次ページが左ページになるようにひとつまたは二つ改ページします。
right次ページが右ページになるようにひとつまたは二つ改ページします。

例えば下記の例で、段落2 に対して break-before: always を指定すると、右図のように 段落2 の前で改ページされるようになります。

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

例えば下記の例で、段落2 に対して break-before: column を指定すると、右図のように 段落2 の前で改カラムされるようになります。

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

使用例

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

関連項目

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

リンク


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