web-dev-qa-db-ja.com

page-break-afterがChrome

Googleのpage-break-afterに問題がありますChrome印刷中。動作していないようです。Firefoxを試してみましたが、問題はありません。私のコードは次のとおりです。

<div style="position: relative; display: block;">

    <div style="display: block; page-break-after: always; position: relative;">Page 1</div>

    <div style="display: block; position: relative; page-break-before:always;">Page 2</div>

</div>

Chromeでそれを行うためのトリックはありますか？

htmlcssgoogle-chromepage-break
12
Thommie

これはハックですが、Chromeは改ページをあまりサポートしていません。代わりにこれを使用してください：

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

そして、これをあなたのCSSに追加してください：

html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}
7
M Zeinstra

改ページが機能するように注意してください。divにはフロートがあってはなりません。

したがって、divがfloat：leftと言っている場合は、印刷用にリセットします：float：noneとすると、改ページが再び機能します。

2
Mohsin

Chrome 2019年10月、以前の回答が機能しませんでした。現在、break-before: pageではなくbreak-before: alwaysを使用する必要があるようです。

これはFFでも機能しますが、以前の回答でも同様です。

<div>
  <div class="break-before">
    Page 1
  </div>
  <div class="break-before">
    Page 2
  </div>
</div>

.break-before {
  break-before: page;
}
1
t k