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/break-inside/index.html | 163 +++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 files/fr/web/css/break-inside/index.html (limited to 'files/fr/web/css/break-inside') diff --git a/files/fr/web/css/break-inside/index.html b/files/fr/web/css/break-inside/index.html new file mode 100644 index 0000000000..89fd65ae74 --- /dev/null +++ b/files/fr/web/css/break-inside/index.html @@ -0,0 +1,163 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}
+ +

La propriété CSS break-inside définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

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

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

+ +

Pour déterminer si on a une rupture, on applique les règles suivantes :

+ +
    +
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur break-inside).
    2. +
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region ou avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. +
+ +

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

+ +

Syntaxe

+ +

La propriété break-inside se définit avec un mot-clé parmi ceux de la liste ci-après.

+ +

Valeurs

+ +
+
auto
+
Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
+
avoid
+
Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.
+
avoid-page
+
Cette valeur interdit toute rupture de page au sein de la boîte.
+
avoid-column
+
Cette valeur interdit toute rupture de colonne au sein de la boîte.
+
avoid-region {{experimental_inline}}
+
Cette valeur interdit toute rupture de région au sein de la boîte.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Synonymes pour page-break-inside

+ +

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme break-inside. De cette façon, cela permet aux sites qui utilisaient page-break-inside de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :

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

Exemples

+ +

CSS

+ +
.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-inside: avoid-column;
+  /* Pour Firefox : */
+  page-break-inside: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-inside: avoid;
+}
+
+ +

HTML

+ +
<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}Aucune modification.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}Ajout de la gestion des ruptures de région.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes relatives à la compatibilité

+ +

Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.

+ +

Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée -webkit-column-break-inside afin de contrôler les ruptures de colonne.

-- cgit v1.2.3-54-g00ecf