widows
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété CSS widows définit le nombre minimum de lignes qui peuvent être laissées en haut de la page, la région ou la colonne.
En typographie, une veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une page. (Le paragraphe se poursuit à partir d'une page précédente.)
Syntaxe
css
/* Valeurs de type <integer> */
widows: 2;
widows: 3;
/* Valeurs globales */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;
Valeurs
<integer>-
Cet entier indique le nombre minimum de lignes qui peuvent apparaître en haut d'une nouvelle page, région ou colonne lorsqu'une rupture intervient. Si la valeur est négative, la déclaration est invalide.
Définition formelle
| Valeur initiale | 2 |
|---|---|
| Applicabilité | les éléments conteneurs de blocs |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
widows =
<integer [1,∞]>
<integer> =
<number-token>
Exemple
Contrôler les lignes veuves dans les colonnes
HTML
html
<div>
<p>Un premier paragraphe avec un peu de texte.</p>
<p>
Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer
le fonctionnement de widows.
</p>
<p>
Enfin, un troisième paragraphe avec un peu plus de texte que le premier.
</p>
</div>
CSS
css
div {
background-color: #8cffa0;
columns: 3;
widows: 2;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |
Compatibilité des navigateurs
Voir aussi
- La propriété
orphans - Les médias paginés