page-break-inside

警告: このプロパティは break-inside プロパティによって置き換えられました。

CSS の page-break-inside プロパティは、現在の要素の内側の 改ページを調整します。

css
/* キーワード値 */
page-break-inside: auto;
page-break-inside: avoid;

/* グローバル値 */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: unset;

試してみましょう

構文

auto

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

avoid

要素の内側で改ページされないようにします。

改ページの別名

page-break-inside プロパティは古いプロパティとなり、 break-inside によって置き換えられました。

互換性のため、 page-break-inside はブラウザーから break-inside の別名として扱われます。これにより、 page-break-inside を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

page-break-inside break-inside
auto auto
avoid avoid

公式定義

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

形式文法

page-break-inside = 
avoid |
auto |
inherit

要素の途中の改ページを防ぐ

HTML

html
<div class="page">
  <p>これは最初の段落です。</p>
  <section class="list">
    <span>リスト</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>Tこれは第二段落です。</p>
  <p>これは第三段落です。文章の量が多くなっています。</p>
  <p>
    これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。
  </p>
</div>

CSS

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;
}

結果

仕様書

Specification
CSS Paged Media Module Level 3
# page-break-inside
CSS Fragmentation Module Level 3
# page-break-properties

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
page-break-inside
Deprecated
auto
Deprecated
avoid
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.
See implementation notes.

関連情報