widows

La propriété widows définit le nombre minimum de lignes qui peuvent être laissées en haut de la page, région ou colonne suivante. En utilisant la propriété widows, on évite d'avoir des veuves sur une seule ligne.

/* Valeurs entières */
/* type <integer> */
widows: 2;
widows: 3;

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

Note : En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).

Syntaxe

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.

Syntaxe formelle

<integer>

Exemple

CSS

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

p {
  background-color: #8ca0ff;
}

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

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>

Résult

Spécifications

Spécification	État	Commentaires
CSS Fragmentation Module Level 3 La définition de 'widows' dans cette spécification.	Candidat au statut de recommandation	Extension de `widows` qui peut désormais être appliqué à n'importe quel type de fragment : pages, régions ou colonnes.
CSS Multi-column Layout Module La définition de 'widows' dans cette spécification.	Version de travail	Recommandation d'utiliser `widows` avec les colonnes.
CSS Level 2 (Revision 1) La définition de 'widows' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	`2`
Applicabilité	les éléments conteneurs de blocs
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser