Могу ли я заставить разрыв страницы при печати HTML?

Я делаю HTML-отчет, который будет печататься, и в нем есть «разделы», которые должны начинаться на новой странице.

Есть ли способ поместить что-то в HTML / CSS, которое будет сигнализировать браузеру о том, что в этот момент ему необходимо принудительно разорвать страницу (начать новую страницу)?

Мне не нужно, чтобы это работало в каждом браузере, я думаю, что могу посоветовать людям использовать определенный набор браузеров, чтобы распечатать это.

Добавьте класс CSS под названием «pagebreak» (или «pb»), например:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Затем добавьте пустой тег DIV ( или любой блочный элемент, создающий поле ) там, где вы хотите разорвать страницу.

<div class="pagebreak"> </div>

Он не отображается на странице, но при печати разбивает страницу.

PS Возможно, это применимо только при использовании -after(а также что еще вы могли бы делать с другими <div>s на странице), но я обнаружил, что мне пришлось расширить класс CSS следующим образом:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Попробуйте эту ссылку

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Просто хотел поставить обнову. page-break-afterтеперь унаследованная собственность.

Официальная страница заявляет

Это свойство было заменено свойством break-after .

Вы можете использовать свойство CSS page-break-before(или page-break-after). Просто установите page-break-before: alwaysна эти блочные элементы (например, заголовок, div, pили tableэлементы) , которые должны начинаться с новой строки.

Например, чтобы вызвать разрыв строки перед заголовком 2-го уровня и перед любым элементом в классе newpage(например, <div class=newpage>...), вы должны использовать

h2, .newpage { page-break-before: always }

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Просто добавьте это туда, где вам нужно, чтобы страница переходила к следующей (текст «страница 1» будет на странице 1, а текст «страница 2» будет на второй странице).

Page 1
<div style='page-break-after:always'></div>
Page 2

Это тоже работает:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Допустим, у вас есть блог с такими статьями:

<div class="article"> ... </div>

Просто добавление этого в CSS сработало для меня:

@media print {
  .article { page-break-after: always; }
}

(протестировано и работает в Chrome 69 и Firefox 62).

Справка:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; важное замечание: здесь сказано, This property has been replaced by the break-after property.но у меня это не сработало break-after. Кроме того, документ MDN break-after, похоже, не относится к разрывам страниц, поэтому я предпочитаю, чтобы (рабочий) page-break-after: always;.

Мне нужен разрыв страницы после каждой третьей строки, пока мы используем команду печати в браузере.

я добавил

<div style='page-break-before: always;'></div>

после каждой третьей строки и моего родительского div display: flex; я удалил, display: flex;и он работал так, как я хочу.

• Мы можем добавить тег разрыва страницы со стилем « page-break-after: always » в том месте, где мы хотим ввести разрыв страницы на html-странице.
  
• " разрыв страницы до " также работает

Пример:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

При печати html-файла с указанным выше кодом предварительный просмотр для печати покажет три страницы (по одной для каждого html-блока « HTML_BLOCK_n »), где, как и в браузере, все три блока появляются последовательно один за другим.

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>

@ Крис Доггетт имеет смысл. Хотя я нашел одну забавную уловку на lvsys.com , и она действительно работает в firefox и chrome. Просто поместите этот комментарий в любом месте, где вы хотите вставить разрыв страницы. Вы также можете заменить <p>тег любым блочным элементом.

<p><!-- pagebreak --></p>