1. ホーム
  2. css

[解決済み] Google Chrome 印刷のページブレーク

2022-05-18 07:06:02

質問

google chromeに改ページをさせようとしています。

いろいろなサイトを通して page-break-after: always; がクロームで有効であることを多くのウェブサイトで教えてもらいましたが、非常に簡単な例でもうまくいかないようです。クロームで印刷するときに強制的に改ページさせる方法はありますか?

どのように解決するのですか?

私は以下の方法で、Chromeを含むすべての主要なブラウザで成功しました。

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

これは簡略化した例です。実際のコードでは、各ページの div はさらに多くの要素を含んでいます。