Фактичної page-breakвластивості в CSS немає. Це насправді це набір з 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тегів і лапок на рівні блоків
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | Будь-який | Будь-який | 7+ | 4+ | TBD | TBD |
Ви можете друкувати з мобільних пристроїв, таких як AirPrint на iOS, але ми не тестували так багато. Якщо хтось має дані про підтримку, повідомте нас.