page-break-inside

このプロパティは 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`
適用対象	ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に `table-row` 要素のように適用することがあります。
継承	なし
計算値	指定通り
アニメーションの種類	離散値

改ページの別名

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