Я делаю отчет в формате HTML, который будет печататься, и в нем есть «разделы», которые должны начинаться на новой странице.
Есть ли способ поместить что-то в HTML / CSS, которое будет сигнализировать браузеру о том, что в этот момент ему необходимо принудительно разорвать страницу (начать новую страницу)?
Мне не нужно, чтобы это работало в каждом браузере, я думаю, что могу посоветовать людям использовать определенный набор браузеров для печати этого.
Добавьте класс CSS под названием «pagebreak» (или «pb»), например:
@media print {
.pagebreak { page-break-before: always; } /* page-break-after works, as well */
}
Затем добавьте пустой тег DIV (или любой элемент блока, который генерирует рамку) в том месте, где вы хотите разорвать страницу.
<div class="pagebreak"> </div>
Он не отображается на странице, но при печати разбивает страницу.
P.S. Возможно, это применимо только при использовании -after (а также того, что еще вы могли бы делать с другими <div> на странице), но я обнаружил, что мне пришлось расширить класс CSS следующим образом:
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
page-break-after применяется к блочным элементам, которые создают поле, поэтому использование пустого элемента <span> не сработает. Лучше применить его к части вашего контента. См. developer.mozilla.org/en-US/docs / Web / CSS / page-break-after
- person nullability; 17.01.2014
.pagebreak { min-height: 1px; page-break-before: always; }
- person pzmarzly; 01.01.2019
Воспользуйтесь этой ссылкой
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
h1 не является хорошим примером, так как это означает заголовок 1-го уровня, а страница обычно должна иметь только один такой заголовок.
- person Jukka K. Korpela; 22.01.2014
h1:not(:first-child) { page-break-before:always; }
- person Jeff Atwood; 21.07.2015
Просто хотел поставить обнову. page-break-after теперь является унаследованным имуществом.
Официальная страница утверждает
Это свойство было заменено свойством break-after .
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='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)
Вы можете использовать свойство CSS page-break-before (или page-break-after). Просто установите page-break-before: always для тех элементов уровня блока (например, элементов заголовка, div, p или table), которые должны начинаться с новой строки.
Например, чтобы вызвать разрыв строки перед заголовком 2-го уровня и перед любым элементом в классе newpage (например, _8 _...), вы должны использовать
h2, .newpage { page-break-before: always }
Попробуйте это (работает в Chrome, Firefox и IE):
... content in page 1 ...
<p style="page-break-after: always;"> </p>
<p style="page-break-before: always;"> </p>
... content in page 2 ...
Допустим, у вас есть блог со статьями вроде этой:
<div class="article"> ... </div>
Просто добавление этого в CSS сработало для меня:
@media print {
.article { page-break-after: always; }
}
(протестировано и работает в Chrome 69 и Firefox 62).
Ссылка:
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;.
CSS
@media print {
.pagebreak {
page-break-before: always;
}
}
HTML
<div class="pagebreak"></div>
Мне нужен разрыв страницы после каждой третьей строки, пока мы используем команду печати в браузере.
я добавил
<div style='page-break-before: always;'></div>
после каждой 3-й строки и у моего родительского div есть display: flex;, поэтому я удалил display: flex;, и он работал так, как я хочу.
Некоторое время я боролся с этим, но ничего не вышло.
В конце концов, решение заключалось в том, чтобы поместить элемент стиля в голову.
Разрыв страницы после не может быть в связанном файле CSS, он должен быть в самом HTML.
<style> в html или он должен быть встроен в элемент, к которому вы хотите применить page-break-after.
- person Dexter Legaspi; 19.06.2021
- Мы можем добавить тег разрыва страницы со стилем «page-break-after: always» в том месте, где мы хотим ввести разрыв страницы на html-странице.
- "page-break-before" также работает
Пример:
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"), где, как и в браузере, все три блока появляются последовательно один за другим.
@ Крис Доггетт имеет смысл . Хотя я нашел одну забавную уловку на lvsys. com, и он действительно работает в firefox и chrome. Просто поместите этот комментарий в любом месте, где вы хотите вставить разрыв страницы. Вы также можете заменить тег <p> любым блочным элементом.
<p><!-- pagebreak --></p>
