Propriedade CSS page-break
A propriedade CSS page-break é um conjunto de três propriedades: page-break-before, page-break-after e page-break-inside. Leia sobre a propriedade e veja exemplos.
Não existe uma única propriedade page-break na especificação CSS. O nome se refere a uma família de três propriedades relacionadas: page-break-before, page-break-after e page-break-inside. Juntas, elas controlam onde ocorre uma quebra de página quando um documento é enviado para uma impressora (ou salvo como PDF), permitindo que você mantenha conteúdo relacionado junto e evite dividir títulos, tabelas ou imagens entre duas folhas.
Essas propriedades só têm efeito em mídias paginadas — impressão ou visualização de impressão. Elas não produzem nenhum resultado visível em uma tela normal, por isso quase sempre são definidas dentro de um bloco @media print. Elas também não têm efeito em um <div> vazio ou em elementos com posicionamento absoluto.
Esta página aborda as três propriedades, quando usar cada uma delas e os substitutos modernos que você deve preferir em código novo.
Quando devo usar isso?
Razões comuns para controlar quebras de página:
- Iniciar cada seção em uma nova página — por exemplo, forçar uma quebra de página antes de cada
<h1>em um relatório longo. - Manter blocos juntos — impedir que uma tabela, figura ou bloco de código seja dividido entre duas páginas.
- Evitar títulos órfãos — um título que fica no final de uma página com seu conteúdo na próxima parece quebrado.
Substitutos modernos: as propriedades break-*
As propriedades page-break-* são legadas. A especificação CSS Fragmentation as substituiu pelas propriedades mais curtas break-before, break-after e break-inside, que também funcionam para layouts de múltiplas colunas e regiões — não apenas para impressão. Os navegadores ainda suportam os nomes antigos para compatibilidade com versões anteriores e os mapeiam para os novos, então a abordagem robusta mais simples é declarar ambos:
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}O restante desta página mostra cada propriedade legada ao lado de seu equivalente moderno.
page-break-after
page-break-after adiciona uma quebra de página depois de um elemento. Por exemplo, encerrar um capítulo para que o próximo comece em uma nova folha:
A propriedade page-break-after é substituída pela propriedade break-after.
Exemplo de código CSS page-break-after
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before adiciona uma quebra de página antes de um elemento — útil para fazer com que cada título principal comece uma nova página:
A propriedade page-break-before é substituída pela propriedade break-before.
Exemplo de código CSS page-break-before
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}Os valores left e right são úteis para impressão frente e verso: eles forçam quebras suficientes para que o próximo elemento comece em uma página da esquerda ou da direita, respectivamente.
page-break-inside
page-break-inside controla se uma quebra é permitida dentro de um elemento. Use avoid para impedir que uma tabela, figura ou parágrafo seja dividido entre duas páginas. Ela aceita apenas auto e avoid.
A propriedade page-break-inside é substituída pela propriedade break-inside.
Exemplo da propriedade break-inside:
O exemplo a seguir usa a propriedade moderna break-inside, que substitui a page-break-inside descontinuada.
Exemplo das propriedades CSS page-break e break-inside|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| auto | Deixa o navegador decidir onde quebrar. Este é o valor padrão. |
| always | Sempre força uma quebra de página (antes ou depois do elemento). |
| avoid | Evita uma quebra de página (antes, depois ou dentro do elemento). |
| left | Força uma ou duas quebras para que o conteúdo seguinte comece em uma página da esquerda. |
| right | Força uma ou duas quebras para que o conteúdo seguinte comece em uma página da direita. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade de seu elemento pai. |
Quais valores se aplicam a qual propriedade:
| Propriedade | Valores aceitos |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Tópicos relacionados
break-after— o substituto moderno parapage-break-after.break-inside— o substituto moderno parapage-break-inside.@media— usado para direcionar a saída de impressão com@media print.columns— layout de múltiplas colunas, ondebreak-insidetambém é útil.