Propriedade CSS page-break-inside
A propriedade CSS page-break-inside define uma quebra de página dentro de um elemento específico. Veja os valores desta propriedade.
A propriedade CSS page-break-inside controla se uma quebra de página é permitida dentro de um elemento quando o documento é impresso. Uma quebra de página é o ponto onde o conteúdo para em uma página impressa e continua na próxima. Use esta propriedade para manter um bloco de conteúdo — um parágrafo, uma lista, uma figura ou uma linha de tabela — sem ser dividido entre duas páginas.
Esta propriedade só tem efeito em contextos de mídia paginada (impressão, pré-visualização de impressão ou salvamento em PDF). Não tem efeito visível em uma tela normal, onde o conteúdo rola continuamente em vez de fluir em páginas discretas.
Quando usar
O caso mais comum é page-break-inside: avoid, que instrui o navegador a manter um elemento junto em uma única página em vez de dividi-lo. Alvos típicos:
- Manter um cabeçalho vinculado ao texto que o segue.
- Evitar que uma única lista, bloco de código ou
<figure>seja cortado ao meio. - Manter uma linha de tabela, cartão ou item de linha de fatura intacto.
Se o elemento for mais alto do que uma página inteira, o navegador não pode cumprir avoid — o conteúdo precisa quebrar em algum lugar — mas iniciará o elemento em uma nova página para que o máximo possível permaneça junto.
page-break-inside é uma propriedade legada do CSS2. O substituto moderno é break-inside, que funciona para páginas impressas, layouts de múltiplas colunas e regiões, e suporta valores mais granulares como avoid-page e avoid-column.
Para compatibilidade retroativa, os navegadores tratam page-break-inside como um alias de break-inside, portanto os sites existentes continuam funcionando. Prefira break-inside em novos projetos.
| Valor inicial | auto |
|---|---|
| Aplica-se a | Elementos de nível de bloco. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.pageBreakInside = "avoid"; |
Sintaxe
page-break-inside: auto | avoid | initial | inherit;Como a propriedade só importa na impressão, normalmente é definida dentro de uma regra @media print para não afetar o layout na tela:
@media print {
/* Don't split tables or figures across pages */
table,
figure {
page-break-inside: avoid;
}
}Exemplos
page-break-inside com o valor avoid
Aqui cada parágrafo, lista e seção .list é solicitado a permanecer em uma página. Ao imprimir este documento (ou abrir a pré-visualização de impressão), o navegador evitará dividir qualquer um desses blocos em um limite de página.
<!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 {
page-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>
<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>page-break-inside com o valor auto
auto é o valor inicial e restaura o comportamento padrão: o navegador pode inserir uma quebra de página dentro do elemento onde for necessário. Defini-lo explicitamente é útil para substituir uma regra avoid herdada ou anterior para um elemento específico.
<!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 {
page-break-inside: auto;
}
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>
<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 | Padrão. Permite uma quebra de página dentro do elemento quando necessário. |
avoid | Evita inserir uma quebra de página dentro do elemento, mantendo-o junto quando possível. |
initial | Define a propriedade com seu valor padrão (auto). |
inherit | Herda o valor do elemento pai. |
Propriedades relacionadas
page-break-inside é uma das propriedades de fragmentação que controlam onde o conteúdo impresso quebra:
page-break-beforeepage-break-after— forçam ou evitam uma quebra antes ou depois de um elemento.break-insideebreak-before— os substitutos modernos e mais capazes que também tratam layouts de múltiplas colunas.
As quebras de página interagem de perto com os layouts de múltiplas colunas criados pelas propriedades columns e column-width.
Suporte dos navegadores
page-break-inside é suportado em todos os principais navegadores, mas o suporte para o valor avoid durante a impressão tem sido historicamente inconsistente. Para resultados mais confiáveis em novos projetos, use break-inside: avoid, que os navegadores mapeiam automaticamente para page-break-inside.