Quebra de página - CSS-Tricks

Não existe uma page-breakpropriedade real no CSS. Na verdade, é um conjunto de 3 propriedades: page-break-before, page-break-aftere page-break-inside. Essas propriedades ajudam a definir como o documento deve se comportar quando impresso. Por exemplo, para tornar um documento impresso mais parecido com um livro.

Propriedades

quebra de página antes

A page-break-beforepropriedade adiciona uma quebra de página antes do elemento ao qual é aplicada.

Nota : esta propriedade está em andamento para ser substituída pela break-beforepropriedade mais genérica . Essa nova propriedade também lida com quebras de coluna e região, embora seja sintaticamente compatível com page-break-before. Portanto, antes de usar page-break-before, verifique se você pode usar em seu break-beforelugar.

Um caso de uso comum para isso é aplicá-lo ao seletor #commentspara que um usuário que imprima uma página com comentários possa facilmente escolher imprimir todo o documento, mas parar antes dos comentários de forma limpa.

quebra de página após

A page-break-afterpropriedade adiciona uma quebra de página após o elemento ao qual é aplicada.

Nota : esta propriedade está em andamento para ser substituída pela break-afterpropriedade mais genérica . Essa nova propriedade também lida com quebras de coluna e região, embora seja sintaticamente compatível com page-break-after. Portanto, antes de usar page-break-after, verifique se você pode usar em seu break-afterlugar.

quebra de página dentro

A page-break-insidepropriedade adiciona uma quebra de página dentro do elemento ao qual é aplicada.

Sintaxe

page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoid

Os valores lefte rightpara page-break-beforee page-break-afterreferem-se a um layout de distribuição (como um livro) onde existem páginas distintas à esquerda e à direita. Eles funcionam assim:

left força uma ou duas quebras de página após o elemento para que a próxima página seja formatada como página esquerda.
right força uma ou duas quebras de página após o elemento para que a próxima página seja formatada como uma página direita.

Considere alwayscomo uma mistura de ambos. A especificação diz:

Um agente de usuário em conformidade pode interpretar os valores 'esquerda' e 'direita' como 'sempre'.

Exemplo

@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )

Este snippet de código faz 3 coisas:

ele força uma quebra de página antes de todos os h2títulos (talvez as tags h2 em seu documento sejam títulos de capítulo que merecem uma página nova)
evita quebras de página logo após os subtítulos porque parece estranho
evita quebras de página dentro de pretags e aspas em nível de bloco