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

/* キーワード値 */
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.
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • paged: DB に値が見つかりません!
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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>これは 2 つめの段落です。</p>
  <p>これは 3 つめの段落です。文章の量が多くなっています。</p>
  <p>これは 4 つめの段落です。3 つめの段落よりも、さらにもう少しだけ、文章の量が多くなっています。</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 の定義
勧告 初期定義

ブラウザー実装状況

 

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 Until Firefox 25, page-break-inside: avoid did not work with the height of a block.
IE 完全対応 8Opera 完全対応 7Safari 完全対応 1.3WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 19
補足
完全対応 19
補足
補足 Until Firefox 25, page-break-inside: avoid did not work with the height of a block.
Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

 

関連情報

ドキュメントのタグと貢献者

このページの貢献者: sutara79, hashedhyphen
最終更新者: sutara79,