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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
widows

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Ver tambien