Кратко
СкопированоКогда вам нужно управлять разбиением контента по страницам на печати, воспользуйтесь свойствами break и page. Пишите их вместе для улучшения поддержки.
Пример
Скопировано
<article> <h1>Заголовок первой статьи</h1> <p>Содержимое первой статьи</p></article><article> <h1>Заголовок второй статьи</h1> <p>Содержимое второй статьи</p></article>
<article>
<h1>Заголовок первой статьи</h1>
<p>Содержимое первой статьи</p>
</article>
<article>
<h1>Заголовок второй статьи</h1>
<p>Содержимое второй статьи</p>
</article>
article { break-after: page; page-break-after: always;}
article {
break-after: page;
page-break-after: always;
}
Каждый элемент <article> будет начинаться на новой странице.
Как пишется
СкопированоЗадайте свойству break и page нужное значение. Возможные значения найдёте в таблице.
| Значение | Что делает |
|---|---|
auto | Значение по умолчанию; разрыв по страницам будет происходить автоматически. |
avoid | Отменяет разрыв страницы; всё содержимое блока с этим значением будет на одной странице. |
always | Разобьёт текстовое содержимое по страницам. Если содержимое находится в разных колонках, разрыв будет происходить по тексту, а не по колонке. |
all | Содержимое разобьётся по страницам, независимо от содержания документа. |
avoid | После нужного блока не будет разрыва страницы. |
page | После нужного поля произойдёт разрыв страницы. |
left | Если при двусторонней печати следующая страница оборотная, будет задан разрыв страницы. |
right | Если при двусторонней печати следующая страница лицевая, будет задан разрыв страницы. |
recto | Сделает следующую страницу лицевой (если на языке страницы пишут слева направо) или оборотной (если пишут справа налево). Между элементами будет вставлен один или два разрыва. |
verso | Сделает следующую страницу оборотной (при письме слева направо) или лицевой (письмо справа налево). Между элементами будет вставлен один или два разрыва. |
avoid | Следующая колонка (например, для таблиц) не будет перенесена на следующую страницу. |
column | Следующая колонка будет перенесена на следующую страницу. |
avoid | После основного поля не будет разрыва страницы. |
region | После основного поля будет обязательный разрыв страницы. |
Как понять
СкопированоЧаще всего не требуется принудительно разбивать контент по страницам, чтобы не считать верхние и нижние висячие строки. В этом случае можно указать «мягкие» переносы содержимого на следующую страницу при помощи значения page.
При помощи свойств break и page со значением avoid удобно работать с таблицами, чтобы на печати одна из колонок не оказалась на неправильной странице.
Также, если дизайнер хочет превратить распечатанный сайт в книгу с разворотами, можно управлять контентом и таким образом. Убедитесь, что страница или контентный блок имеет правильное значение атрибута lang.
Устаревшие свойства
СкопированоСвойство page устарело и его заменили на break. Для улучшения поддержки используйте их вместе, они почти всегда совпадают. Единственное исключение — значение page у break эквивалентно always для page.
article { break-after: page; page-break-after: always;}
article {
break-after: page;
page-break-after: always;
}
Читайте также
-
@mediaСайт может подстраиваться под обстоятельства благодаря этой директиве.