From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/page-break-inside/index.html | 164 ++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/fr/web/css/page-break-inside/index.html (limited to 'files/fr/web/css/page-break-inside/index.html') diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html new file mode 100644 index 0000000000..cf16f15c01 --- /dev/null +++ b/files/fr/web/css/page-break-inside/index.html @@ -0,0 +1,164 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/page-break-inside +--- +
{{CSSRef}}
+ +
+

Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.

+
+ +

La propriété page-break-inside ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.

+ +
/* Valeurs avec un mot-clé */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* Valeurs globales */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+
avoid
+
L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Alias avec break-inside

+ +

La propriété page-break-inside a désormais été remplacée par la propriété {{cssxref("break-inside")}}.

+ +

Pour des raisons de compatibilité, page-break-inside devrait être considérée par les navigateurs comme synonyme de break-inside. De cette façon, les sites utilisant page-break-inside pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

Exemples

+ +

HTML

+ +
<div class="page">
+  <p>Un premier paragraphe.</p>
+  <section class="list">
+    <span>Une liste</span>
+    <ol>
+      <li>Un</li>
+<!--       <li>Deux</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>Un</li>
+<!--     <li>Deux</li> -->
+  </ul>
+  <p>Un deuxième paragraphe.</p>
+  <p>Un troisième paragraphe, un peu plus long.</p>
+  <p>Un quatrième paragraphe, un peu plus long voire plus long que le troisième.</p>
+</div>
+ +

CSS

+ +
.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 400, 160)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}Permet d'appliquer cette propriété sur plus d'éléments.
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.page-break-inside")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf