Propriedade CSS widows
Use a propriedade CSS widows para definir o número de linhas que podem permanecer no topo de uma página ou coluna. Leia sobre a propriedade e veja exemplos.
A propriedade CSS widows especifica o número mínimo de linhas de um contêiner de bloco que devem permanecer no topo de uma página ou coluna.
Uma viúva é uma linha ou palavra isolada que aparece sozinha no topo de uma página ou coluna.
Esta propriedade é usada principalmente em contextos de mídia paginada, como as regras @media print ou @page.
A propriedade widows possui uma propriedade relacionada: orphans, que especifica o número mínimo de linhas que devem permanecer no final da página ou coluna anterior. Em outras palavras, as linhas que ficam no final da página anterior são órfãs, enquanto as linhas que sobram no topo da nova página são viúvas.
Por que usar a propriedade widows
Quando um parágrafo é dividido entre duas páginas ou duas colunas, a quebra pode deixar apenas uma linha isolada no topo da próxima página. Essa linha isolada é difícil de ler e parece descuidada em documentos impressos e layouts com múltiplas colunas.
A propriedade widows permite definir um número mínimo de linhas que o navegador deve manter juntas no topo da nova página ou coluna. Se respeitar a divisão deixasse menos linhas do que o permitido, o navegador move linhas adicionais para frente, de modo que o limite seja atingido. Por exemplo, widows: 3 garante que pelo menos três linhas de um parágrafo avancem juntas para a próxima página.
Combine widows com orphans para controlar ambos os lados de uma quebra: orphans protege o final da página que sai, widows protege o topo da página que chega.
Valores negativos são inválidos. O valor deve ser um número inteiro positivo.
| Valor Inicial | 2 |
|---|---|
| Aplica-se a | Elementos contêineres de bloco. |
| Herdada | Sim. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.widows = "3"; |
Sintaxe
Valores CSS widows
widows: <integer> | initial | inherit;Exemplo da propriedade widows:
Exemplo de código CSS widows
<!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;
}
@media print {
.text {
padding: 20px;
background-color: #fff;
columns: 10em 3;
column-gap: 2em;
text-align: justify;
}
.text p {
widows: 2;
}
}
</style>
</head>
<body>
<h2>Widows 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>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
</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>A propriedade widows só tem efeito em contextos fragmentados — mídia paginada (pré-visualização de impressão, @page) ou layouts CSS com múltiplas colunas. Em uma página web normal com rolagem contínua, não há quebras de página ou coluna, portanto a propriedade não tem nada sobre o que agir. O exemplo acima usa @media print para demonstrá-la: abra a pré-visualização de impressão do navegador para ver o efeito.
Quando se aplica e quando não se aplica
Para que widows tenha algum efeito, três condições devem ser verdadeiras:
- O conteúdo está dividido entre fragmentos — seja páginas impressas ou caixas multi-coluna.
- A propriedade está definida em um contêiner de bloco (como um
<p>ou<div>), não em texto inline. - A quebra ocorre dentro do bloco afetado. Use page-break-inside (ou
break-inside: avoid) quando quiser impedir que um bloco inteiro seja dividido.
O suporte do navegador para widows é irregular fora do contexto de impressão. Os motores de impressão (geração de PDF, pré-visualização de impressão) respeitam amplamente a propriedade, enquanto o suporte em layouts de múltiplas colunas na tela varia entre navegadores, portanto trate-a como um aprimoramento progressivo e não como uma garantia.
Valores
| Valor | Descrição |
|---|---|
<integer> | Especifica o número mínimo de linhas que devem permanecer no topo 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. |