属性名 | break-inside |
---|---|
値 | auto | avoid | avoid-page | avoid-column | avoid-region |
初期値 | auto |
適用可能要素 | ブロックレベル要素 |
継承 | 継承しない |
メディア | paged |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10 | 未 | 未 | 10.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 の途中での改カラムが禁止されます。
|
⇒ |
|
.multicol { column-count: 3; } .multicol p { break-inside: avoid-column; }
<div class="multicol"> <p>段落1:あああああああ・・・</p> <p>段落2:あああああああ・・・</p> <p>段落3:あああああああ・・・</p> </div>