page-break-inside

要素の途中で改ページを行うか、否かを指定します。

ブラウザ

O6 / O7 / O9

書式

要素[.class名][#id名]{ page-break-inside : 値; }

▲PageTop

指定できる値

値	初期値	意味
auto	○	改ページをブラウザー依存で行います。
avoid		改ページを禁止します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
      page-break-inside : auto;
      height : 70%;
      }
      #sample2 {
      page-break-inside : avoid;
      height : 70%;
      }
    </style>
  </head>
  <body>
    <p>■印刷プレビューで確認してください。</p>
    <br>
    <div id="sample1">
      <p>「page-break-inside : auto」サンプル</p>
      <p>昔々、あるところにおじいさんと、おばあさんが住んでおったそうな。</p>
      <p>ある日のこといつもどおりに、おじいさんは山へ芝刈りに、おばあさんは川に洗濯をしにいきました。</p>
      <p>おばあさんは洗濯物を「よいせ」と川へ持って行き洗濯をし始めたところ、</p>
      <p>川上から大きな桃がどんぶらこ～、どんぶらこ～と流れてきました。</p>
      <p>おばあさんは「なんと大きな桃じゃぁ」と驚きましたが、おじいさんと一緒に食べようと家へ持って帰りました。</p>
      <p>家路に着いたおじいさんもびっくり仰天。</p>
      <p>二人は早速桃を食べようと、包丁で「ズバッ」と切ったと同時に、中から元気な男の子が現れました。</p>
    </div>
    <br>
    <div id="sample2">
      <p>「page-break-inside : avoid」サンプル</p>
      <p>昔々、あるところにおじいさんと、おばあさんが住んでおったそうな。</p>
      <p>ある日のこといつもどおりに、おじいさんは山へ芝刈りに、おばあさんは川に洗濯をしにいきました。</p>
      <p>おばあさんは洗濯物を「よいせ」と川へ持って行き洗濯をし始めたところ、</p>
      <p>川上から大きな桃がどんぶらこ～、どんぶらこ～と流れてきました。</p>
      <p>おばあさんは「なんと大きな桃じゃぁ」と驚きましたが、おじいさんと一緒に食べようと家へ持って帰りました。</p>
      <p>家路に着いたおじいさんもびっくり仰天。</p>
      <p>二人は早速桃を食べようと、包丁で「ズバッ」と切ったと同時に、中から元気な男の子が現れました。</p>
    </div>
  </body>
</html>

表示結果

サンプルコードの表示

▲PageTop

page-break-inside

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS