Propriedade CSS orphans

A propriedade CSS orphans define o número mínimo de linhas de uma caixa de nível de bloco que devem permanecer na parte inferior de uma página, região ou coluna quando a caixa é quebrada em um limite de fragmentação. Se respeitar o valor resultasse em menos linhas do que o exigido, o navegador move todo o grupo de linhas para a próxima página ou coluna.

Esta página explica o que é uma órfã, quando a propriedade tem efeito, sua sintaxe e valores, além de um exemplo executável.

O que é uma órfã?

Em tipografia, uma órfã é a primeira linha de um parágrafo que fica isolada na parte inferior de uma página ou coluna, enquanto o restante do parágrafo continua na próxima. Órfãs parecem estranhas visualmente, então essa propriedade permite dizer ao navegador para manter um número mínimo de linhas juntas.

Page 1 (bottom)              Page 2 (top)
┌──────────────────┐         ┌──────────────────┐
│ ...               │        │ but the leap into │  ← orphan: just 1 line
│                   │        │ electronic ...    │     was left behind on
│ It has survived   │        │                   │     page 1 → looks bad
└──────────────────┘         └──────────────────┘

Com orphans: 2, um parágrafo que deixaria apenas uma linha na parte inferior é movido integralmente para a próxima página, mantendo pelo menos duas linhas juntas.

Quando `orphans` se aplica?

A propriedade só tem importância em contextos fragmentados — lugares onde o conteúdo é dividido entre caixas:

Impressão (e Pré-visualização de Impressão / imprimir como PDF), onde o conteúdo de fluxo é quebrado em múltiplas páginas.
Layouts de múltiplas colunas criados com a propriedade columns, onde as linhas se dividem entre colunas.
Mídia paginada CSS, frequentemente combinada com a regra @media (por exemplo, @media print { … }) para aplicá-la somente ao imprimir.

Em layouts de tela normais com coluna única não há quebra de página ou coluna, portanto definir orphans não tem efeito visível. Para ver o efeito em ação, visualize o exemplo abaixo na Pré-visualização de Impressão ou use a configuração de múltiplas colunas que acompanha o exemplo.

A propriedade orphans tem uma propriedade irmã, widows, que define o número mínimo de linhas permitidas no topo da página ou coluna seguinte. Normalmente, elas são definidas juntas.

Valor Inicial	2
Aplica-se a	Elementos contêiner de bloco.
Herdada	Não.
Animável	Não.
Versão	CSS2
Sintaxe DOM	object.style.orphans = "2";

Sintaxe

orphans: <integer> | initial | inherit;

O valor deve ser um inteiro positivo. Valores negativos e 0 são inválidos e ignorados (a propriedade mantém seu valor anterior). O padrão é 2.

Exemplo da propriedade orphans

Exemplo de código CSS orphans

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: Roboto, Helvetica, sans-serif;
      }
      hr {
        margin: 50px 0;
      }
      .example {
        margin: 30px auto;
        width: 800px;
      }
      .text {
        padding: 20px;
        background-color: #fff;
        -moz-columns: 10em 3;
        -webkit-columns: 10em 3;
        columns: 10em 3;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-gap: 2em;
        text-align: justify;
      }
      .text p {
        orphans: 4;
      }
    </style>
  </head>
  <body>
    <h2>Orphans property example</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
        </p>
        <p>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

No exemplo acima, orphans: 4 força pelo menos quatro linhas de cada parágrafo a ficarem juntas no final de uma coluna. O parágrafo verde demonstra isso: o navegador mantém quatro de suas linhas na parte inferior da primeira coluna, em vez de deixar uma única linha isolada ali.

Aplicando orphans somente ao imprimir

Como orphans só afeta conteúdo fragmentado, um padrão comum é limitá-la à saída de impressão com uma media query:

@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

Isso mantém pelo menos três linhas juntas na parte inferior (orphans) e no topo (widows) de cada página impressa, sem afetar o layout na tela.

Valores

Valor	Descrição
`<integer>`	Especifica o número de linhas que podem ser deixadas no final de uma página ou coluna. Valores negativos são inválidos.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

Estas propriedades também controlam como o conteúdo é quebrado entre páginas e colunas:

widows — a propriedade irmã; número mínimo de linhas no topo da próxima página ou coluna.
page-break-inside — impede (ou permite) uma quebra de página dentro de um elemento.
columns e column-gap — configuram o layout de múltiplas colunas onde orphans pode ter efeito.

Prática

O que a propriedade 'orphans' do CSS faz?

Define o número mínimo de linhas em um contêiner de bloco que devem permanecer na parte inferior de uma página quando o contêiner é dividido entre duas páginas.Define a cor de fundo de um elemento.Controla o comportamento de tabelas.Ajusta a cor do texto em um elemento.Define o número mínimo de linhas em um contêiner de bloco que devem aparecer no topo da próxima página quando o contêiner é dividido entre duas páginas.