1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: orphans
slug: Web/CSS/orphans
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/orphans
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>orphans</code></strong> définit le nombre <em>minimum</em> de lignes qui doivent rester en bas d'une <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">page</a>, d'une région ou d'une <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> dans un conteneur de bloc.</p>
<pre class="brush:css no-line-numbers">/* Valeur numérique entière */
orphans: 3;
/* Valeurs globales */
orphans: inherit;
orphans: initial;
orphans: unset;
</pre>
<div class="note">
<p><strong>Note :</strong> En typographie, un orphelin (<em>orphan</em> 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).</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><integer></code></dt>
<dd>Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class=exemple>
Tout en causant ainsi, Alice était entrée dans une petite chambre
bien rangée, et, comme elle s’y attendait, sur une petite table
dans l’embrasure de la fenêtre, elle vit un éventail et deux ou
trois paires de gants de chevreau tout petits. Elle en prit une
paire, ainsi que l’éventail, et allait quitter la chambre lorsqu’
elle aperçut, près du miroir, une petite bouteille. Cette fois il
n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice
de la déboucher et de la porter à ses lèvres. « Il m’arrive toujours
quelque chose d’intéressant, » se dit-elle, « lorsque je mange ou
que je bois. Je vais voir un peu l’effet de cette bouteille.
J’espère bien qu’elle me fera regrandir, car je suis vraiment
fatiguée de n’être qu’une petite nabote ! »C’est ce qui arriva en
effet, et bien plus tôt qu’elle ne s’y attendait. Elle n’avait pas
bu la moitié de la bouteille, que sa tête touchait au plafond et
qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle
remit bien vite la bouteille sur la table en se disant : « En voilà
assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus
passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! »
</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.exemple {
orphans: 4;
columns: 3;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","600","500")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
<td>{{Spec2('CSS3 Fragmentation')}}</td>
<td>La propriété <code>orphans</code> est étendue pour s'appliquer à n'importe quel fragment comme les pages, les régions ou les colonnes.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.orphans")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("widows")}}</li>
<li><a href="/fr/docs/Web/CSS/Média_paginés">Média paginés</a></li>
</ul>
|
