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).

Valeur initiale2
Applicabilitéles éléments conteneurs de blocs
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

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.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 25Edge Support complet 12Firefox Aucun support NonIE Support complet 8Opera Support complet 9.2Safari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,