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 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,∞]>
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