Чи можна примусити розірвати сторінку в друкуванні 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зараз є спадщиною.

Офіційні сторінки стану

Цю властивість було замінено на властивість прориву .

Ви можете використовувати властивість 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;.

• Ми можемо додати тег розриву сторінки зі стилем " page-break-after: always " в тому місці, де ми хочемо ввести pagebreak на 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 »), де, як і у браузері, усі три блоки з’являються послідовно один за одним.

Мені потрібен перерв сторінки після кожного 3-го рядка, коли ми використовуємо команду print у браузері.

Я додав <div style = 'page-break-before: always;'> </div>

після кожного третього ряду та мого батьківського діва відображається: flex; тому я зняв дисплей: flex; і це працювало так, як я хочу.

CSS

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

HTML

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

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

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