Page-break-after не работает в Chrome

У меня проблема с page-break-after в Google 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?

Ответы

Ответ 1

Это взломать, но 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;
}

Ответ 2

Обратите внимание, что для разрыва страницы нужно работать, div не должен быть плавающим!

Так что, если ваш div сказал: float: left, сбросьте его для печати, говоря: float: none, и это заставит разрыв страницы работать снова.

Ответ 3

Я не смог получить предыдущие ответы на работу в Chrome в октябре 2019 года. Сейчас, похоже, следует использовать 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;
}