CSS - break-inside
概要
| 属性名 | 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 | |||
|---|---|---|---|---|---|---|
|
段落１：ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
ああああああああああ
段落２：ああああああああ
あああああああああああああ
あああああああああああああ
|
あああああああああああああ
あああああああああああ
段落３：ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああ
|
⇒ |
段落１：ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
ああああああああああ
|
段落２：ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああああ
あああああああああああ
段落３：ああああああああ
あああああああああああああ
あああああああああああああ
あああああああああ
|
例えば下記の例で、段落2 に対して break-inside: avoid-column を指定すると、右図のように 段落2 の途中での改カラムが禁止されます。
|
⇒ |
|
使用例
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リンク
- http://www.w3.org/TR/css3-multicol/#break-inside
- https://www.w3.org/TR/css-break-3/#propdef-break-inside
- https://triple-underscore.github.io/css-break-ja.html#propdef-break-inside
- https://developer.mozilla.org/ja/docs/Web/CSS/break-inside
- http://caniuse.com/#search=break-inside
Copyright (C) 2015 杜甫々
初版：2015年10月25日、最終更新：2015年10月25日
https://www.tohoho-web.com/css/prop/break-inside.htm