このプロパティは
break-inside
プロパティによって置き換えられました。CSS の page-break-inside
プロパティは、現在の要素の内側の 改ページを調整します。
/* キーワード値 */
page-break-inside: auto;
page-break-inside: avoid;
/* グローバル値 */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: unset;
初期値 | auto |
---|---|
適用対象 | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements. |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
改ページの別名
page-break-inside
プロパティは古いプロパティとなり、 break-inside
によって置き換えられました。
互換性のため、 page-break-inside
はブラウザーから break-inside
の別名として扱われます。これにより、 page-break-inside
を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
page-break-inside | break-inside |
---|---|
auto |
auto |
avoid |
avoid |
構文
値
auto
- 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
avoid
- 要素の内側で改ページされないようにします。
形式文法
auto | avoid
例
HTML
<div class="page">
<p>これは最初の段落です。</p>
<section class="list">
<span>リスト</span>
<ol>
<li>順序付き項目1</li>
<!-- <li>順序付き項目2</li> -->
</ol>
</section>
<ul>
<li>順序なし項目1</li>
<!-- <li>順序なし項目2</li> -->
</ul>
<p>これは第二段落です。</p>
<p>これは第三段落です。文章の量が多くなっています。</p>
<p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p>
</div>
CSS
.page {
background-color: #8cffa0;
height: 90px;
width: 200px;
columns: 1;
column-width: 100px;
}
.list, ol, ul, p {
break-inside: avoid;
}
p {
background-color: #8ca0ff;
}
ol, ul, .list {
margin: 0.5em 0;
display: block;
background-color: orange;
}
p:first-child {
margin-top: 0;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Paged Media Module Level 3 page-break-inside の定義 |
草案 | より多くの要素に適用できるように拡張 |
CSS Level 2 (Revision 1) page-break-inside の定義 |
勧告 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。