Propiedad CSS orphans
Usa la propiedad CSS orphans para especificar el número de líneas que pueden quedar al final de una página o columna. Lee sobre la propiedad y prueba ejemplos.
La propiedad CSS orphans establece el número mínimo de líneas de una caja a nivel de bloque que deben quedar al final de una página, región o columna cuando la caja se divide entre dos fragmentos. Si respetar ese valor dejara menos líneas de las requeridas, el navegador mueve todo el grupo de líneas a la siguiente página o columna.
Esta página explica qué es una huérfana, cuándo la propiedad tiene efecto, su sintaxis y valores, y un ejemplo ejecutable.
¿Qué es una huérfana?
En tipografía, una huérfana es la primera línea de un párrafo que queda aislada al final de una página o columna mientras el resto del párrafo continúa en la siguiente. Las huérfanas se ven torpes, por eso la propiedad te permite indicarle al navegador que mantenga juntas un número mínimo de líneas.
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
└──────────────────┘ └──────────────────┘Con orphans: 2, un párrafo que dejaría solo una línea al final se mueve completamente a la siguiente página, manteniendo al menos dos líneas juntas.
¿Cuándo aplica orphans?
La propiedad solo importa en contextos fragmentados — lugares donde el contenido se divide entre cajas:
- Impresión (y Vista previa de impresión / imprimir a PDF), donde el contenido fluye y se divide en múltiples páginas.
- Diseños multicolumna creados con la propiedad columns, donde las líneas se dividen entre columnas.
- Medios paginados CSS, frecuentemente combinados con la regla @media (p. ej.
@media print { … }) para aplicarlo solo al imprimir.
En diseños de pantalla ordinarios de una sola columna no hay salto de página ni de columna, por lo que establecer orphans no tiene efecto visible. Para verlo funcionar, visualiza el ejemplo siguiente en Vista previa de impresión o usa la configuración multicolumna que incluye.
La propiedad orphans tiene una propiedad hermana, widows, que establece el número mínimo de líneas permitidas en la parte superior de la siguiente página o columna. Suelen establecerse juntas.
| Valor inicial | 2 |
|---|---|
| Se aplica a | Elementos contenedores de bloque. |
| Heredable | No. |
| Animatable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.orphans = "2"; |
Sintaxis
orphans: <integer> | initial | inherit;El valor debe ser un entero positivo. Los valores negativos y 0 son inválidos y se ignoran (la propiedad conserva su valor anterior). El valor predeterminado es 2.
Ejemplo de la propiedad orphans
Ejemplo 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>En el ejemplo dado, orphans: 4 obliga a que al menos cuatro líneas de cada párrafo permanezcan juntas al final de una columna. El párrafo verde lo demuestra: el navegador mantiene cuatro de sus líneas al final de la primera columna en lugar de dejar una sola línea suelta colgando allí.
Aplicar orphans solo al imprimir
Dado que orphans solo afecta al contenido fragmentado, un patrón habitual es delimitarlo a la salida de impresión con una media query:
@media print {
p {
orphans: 3;
widows: 3;
}
}Esto mantiene al menos tres líneas juntas al final (orphans) y al inicio (widows) de cada página impresa, sin afectar el diseño en pantalla.
Valores
| Valor | Descripción |
|---|---|
<integer> | Especifica el número de líneas que pueden quedar al final de una página o columna. Los valores negativos son inválidos. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
Estas propiedades también controlan cómo se divide el contenido entre páginas y columnas:
- widows — la propiedad hermana; mínimo de líneas en la parte superior de la siguiente página o columna.
- page-break-inside — evita (o permite) un salto de página dentro de un elemento.
- columns y column-gap — configuran el diseño multicolumna donde
orphanspuede tener efecto.