| 属性名 | 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>