orphans
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 orphans définit le nombre minimum de lignes dans un bloc englobant qui doivent être affichées en bas d'une page, d'une région ou d'une colonne.
En typographie, un orphelin (orphan en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).
Syntaxe
css
/* Valeurs de type <integer> */
orphans: 2;
orphans: 3;
/* Valeurs globales */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;
Valeurs
<integer>-
Le nombre minimum de lignes qui peuvent rester seules en bas d'un fragment avant une rupture de fragmentation. La valeur doit être positive.
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
orphans =
<integer [1,∞]>
<integer> =
<number-token>
Exemples
Définir une taille minimale d'orphelin de trois lignes
HTML
html
<div>
<p>Ceci est le premier paragraphe contenant du texte.</p>
<p>
Ceci est le deuxième paragraphe contenant un peu plus de texte que le
premier. Il est utilisé pour démontrer le fonctionnement de la propriété
orphans.
</p>
<p>
Ceci est le troisième paragraphe. Il contient un peu plus de texte que le
premier.
</p>
</div>
CSS
css
div {
background-color: #8cffa0;
height: 150px;
columns: 3;
orphans: 3;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |
Compatibilité des navigateurs
Voir aussi
- La propriété
widows - Média paginés