Propiedad CSS widows

La propiedad CSS widows especifica el número mínimo de líneas de un contenedor de nivel de bloque que debe permanecer en la parte superior de una página o columna.

Una viuda es una sola línea o palabra que aparece sola en la parte superior de una página o columna.

Esta propiedad se utiliza 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érfanos, mientras que las líneas que quedan en la parte superior de la nueva página son viudas.

INFO

Los valores negativos no son válidos.

Valor inicial	2
Se aplica a	Elementos contenedores de bloque.
Heredado	Sí.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.widows = "3";

Sintaxis

Valores de CSS widows

css

widows: <integer> | initial | inherit;

Ejemplo de la propiedad widows:

Ejemplo de código CSS widows

html

<!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>

Try it Yourself »

note
La propiedad widows solo tiene efecto en medios paginados (por ejemplo, vista previa de impresión). El ejemplo utiliza @media print para demostrarlo.

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 no son válidos.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Practice

¿Cuál de las siguientes afirmaciones es correcta sobre la propiedad CSS widows?

El valor entero especifica el número de líneas que pueden dejarse al final de una página o columna.Esta propiedad nunca se utiliza con la regla @media.La propiedad widows tiene una propiedad relacionada: los orphans.Es una propiedad animable.

Propiedad CSS widows ​

Sintaxis ​

Ejemplo de la propiedad widows: ​

Valores ​

Practice ​

Propiedad CSS widows

Sintaxis

Ejemplo de la propiedad widows:

Valores

Practice