В page-breakCSS нет фактического свойства. Это на самом деле это набор из 3 -х свойств: page-break-before, page-break-afterи page-break-inside. Эти свойства помогают определить, как документ должен вести себя при печати. Например, чтобы печатный документ был больше похож на книгу.
Характеристики
разрыв страницы до
page-break-beforeСвойство добавляет страницу-брейк до элемента , к которому она применяется.
Примечание : это свойство заменяется более общим break-beforeсвойством. Это новое свойство также обрабатывает разрывы столбцов и регионов, будучи синтаксически совместимым с page-break-before. Поэтому перед использованием page-break-beforeпроверьте, можете ли вы использовать break-beforeвместо него.
Распространенным вариантом использования этого является применение его к селектору, #commentsчтобы пользователь, распечатывающий страницу с комментариями, мог легко выбрать печать всего документа, но аккуратно остановиться перед комментариями.
разрыв страницы после
page-break-afterСвойство добавляет страницу-брейк после элемента , к которому она применяется.
Примечание : это свойство заменяется более общим break-afterсвойством. Это новое свойство также обрабатывает разрывы столбцов и регионов, будучи синтаксически совместимым с page-break-after. Поэтому перед использованием page-break-afterпроверьте, можете ли вы использовать break-afterвместо него.
разрыв страницы внутрь
page-break-insideСвойство добавляет страницу-брейк внутри элемента , к которому она применяется.
Синтаксис
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidleftИ rightзначения для page-break-beforeи page-break-afterотносятся к расширенным макете (как книга) , где существуют различные левые и правые страницы. Работают они так:
leftзаставляет один или два разрыва страницы после элемента, чтобы следующая страница была отформатирована как левая страница.rightзаставляет один или два разрыва страницы после элемента, чтобы следующая страница была отформатирована как правая страница.
Считайте alwaysсмесь обоих. В спецификации сказано:
Соответствующий пользовательский агент может интерпретировать значения «влево» и «вправо» как «всегда».
Пример
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Этот фрагмент кода выполняет 3 функции:
- он вызывает разрыв страницы перед всеми
h2заголовками (возможно, теги h2 в вашем документе - это заголовки глав, которые заслуживают новой страницы) - он предотвращает разрывы страниц сразу после подзаголовков, потому что это выглядит странно
- предотвращает разрывы страниц внутри
preтегов и кавычки на уровне блоков
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любой | Любой | Любой | 7+ | 4+ | TBD | TBD |
Вы можете печатать с мобильных устройств, например AirPrint на iOS, но мы этого не тестировали. Если у кого-то есть данные о поддержке, дайте нам знать.