widows

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La propiedad CSS widows especifica el número minimo de lineas en un contenedor de bloques que se deben mostrar en la parte superior de la pagina, region o columna. Esta propiedad se usa normalmente para controlar como se producen las pausas.

css
/* valores <enteros> */
widows: 2;
widows: 3;

/* valores globales */
widows: inherit;
widows: initial;
widows: unset;

Nota: En la tipografia, un widow is la ultima linea de un paragrafo que aparece solo en la parte superior de la pagina.

Valor inicial2
Applies toblock container elements
Heredableyes
Valor calculadocomo se especifica
Animation typeby computed value type

Sintaxis

Valores

<integer>

The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.

Sintaxis Formal

widows = 
  <integer [1,∞]>

Ejemplo

HTML

html
<div>
  <p>Este es el primer paragrafo que contiene algun texto.</p>
  <p>
    Este es el segundo paragrafo que contiene algún texto mayor que el primero.
    Es usado para desmostrar como trabaja widows.
  </p>
  <p>
    Este es el tercer paragrafo. Es un poco mas extenso en texto que el primero.
  </p>
</div>

CSS

css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

Resultado

Especificaciones

Specification
CSS Fragmentation Module Level 3
# widows-orphans
CSS Multi-column Layout Module Level 1
# filling-columns

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambien