Я делаю отчет в формате 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> на странице), но я обнаружил, что мне пришлось расширить класс CSS следующим образом:
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
Попробуйте ссылку
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
Вы можете использовать свойство 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 }
Просто хотел поставить обновление. page-break-after теперь является устаревшим свойством.
Официальная страница государства
Это свойство было заменено свойством break-after.
Это не работает на моем сайте. Я помещаю тэг div с классом разрыва страницы после того, как количество x дивов было выведено, чтобы напечатанная страница "ломалась" чисто. И да - я проверил и перепроверил свой код и просмотрел исходную страницу в своем браузере.
Допустим, у вас есть блог с такими статьями:
<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;.
Просто добавьте это, если вам нужно, чтобы страница переходила к следующей (текст "страница 1" будет на странице 1, а текст "страница 2" будет на второй странице).
Page 1
<div style='page-break-after:always'></div>
Page 2
@Крис Доггетт имеет смысл.
Хотя, я нашел один забавный трюк на lvsys.com, и он действительно работает на firefox и chrome. Просто разместите этот комментарий в любом месте, где вы хотите, чтобы разрыв страницы был вставлен. Вы также можете заменить тег <p> на любой элемент блока.
<p><!-- pagebreak --></p>