widows
Disponibilidad limitada
Esta característica no es Baseline porque no funciona en algunos de los navegadores más usados.
¿Quieres que más navegadores sean compatibles con esta característica? Cuéntanos por qué.
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 inicial | 2 |
|---|---|
| Applies to | block container elements |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | by 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,∞]>
<integer> =
<number-token>
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
| Especificación |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |