Propiedad CSS widows
Usa la propiedad CSS widows para especificar el número de líneas que pueden quedar en la parte superior de una página o columna. Lee sobre la propiedad y prueba ejemplos.
La propiedad CSS widows especifica el número mínimo de líneas de un contenedor a nivel de bloque que deben permanecer en la parte superior de una página o columna.
Una viuda es una línea o palabra que aparece sola en la parte superior de una página o columna.
Esta propiedad se usa principalmente en contextos de medios paginados, como las reglas @media print o @page.
La propiedad widows tiene una propiedad relacionada: orphans, que especifica el número mínimo de líneas que deben permanecer en la parte inferior de la página o columna anterior. En otras palabras, las líneas que quedan al final de la página anterior son huérfanas, mientras que las líneas que quedan en la parte superior de la nueva página son viudas.
Por qué usar la propiedad widows
Cuando un párrafo se divide entre dos páginas o dos columnas, el salto puede dejar una sola línea suelta en la parte superior de la siguiente página. Esa línea aislada es difícil de leer y tiene un aspecto poco pulido en documentos impresos y maquetaciones de varias columnas.
La propiedad widows permite establecer un número mínimo de líneas que el navegador debe mantener juntas en la parte superior de la nueva página o columna. Si respetar el salto dejara menos líneas de las permitidas, el navegador mueve líneas adicionales hacia adelante para alcanzar el umbral. Por ejemplo, widows: 3 garantiza que al menos tres líneas de un párrafo viajen juntas a la página siguiente.
Combina widows con orphans para controlar ambos extremos de un salto: orphans protege la parte inferior de la página que se abandona, widows protege la parte superior de la página que se inicia.
Los valores negativos son inválidos. El valor debe ser un entero positivo.
| Valor inicial | 2 |
|---|---|
| Se aplica a | Elementos de contenedor de bloque. |
| Heredable | Sí. |
| Animatable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.widows = "3"; |
Sintaxis
Valores CSS widows
widows: <integer> | initial | inherit;Ejemplo de la propiedad widows:
Ejemplo 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>La propiedad widows solo tiene efecto en contextos fragmentados: medios paginados (vista previa de impresión, @page) o maquetaciones de varias columnas en CSS. En una página web de desplazamiento continuo normal no hay saltos de página ni de columna, por lo que la propiedad no tiene ningún efecto. El ejemplo anterior usa @media print para demostrarlo: abre la vista previa de impresión del navegador para ver el efecto.
Cuándo aplica y cuándo no
Para que widows tenga algún efecto, deben cumplirse tres condiciones:
- El contenido está dividido entre fragmentos: páginas impresas o cajas de varias columnas.
- La propiedad está establecida en un contenedor de bloque (como
<p>o<div>), no en texto en línea. - El salto se produce dentro del bloque afectado. Usa page-break-inside (o
break-inside: avoid) cuando quieras evitar que un bloque completo se divida.
La compatibilidad del navegador con widows es desigual fuera de la impresión. Los motores de impresión (generación de PDF, vista previa de impresión) lo respetan ampliamente, mientras que el soporte en maquetaciones de varias columnas en pantalla varía entre navegadores, por lo que debe tratarse como una mejora progresiva y no como una garantía.
Valores
| Valor | Descripción |
|---|---|
<integer> | Especifica el número mínimo de líneas que deben permanecer en la parte superior 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. |