---
title: break-inside
slug: Web/CSS/break-inside
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/break-inside
---
<div>{{CSSRef}}</div>

<p>La propriété CSS <strong><code>break-inside</code></strong> 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.</p>

<pre class="brush:css no-line-numbers">/* 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;
</pre>

<p>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 <code>break-inside</code> de l'élément englobant.</p>

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

<ol>
 <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), 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 <code>break-inside</code>).</li>
 <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> ou <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
</ol>

<p>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.</p>

<h2 id="Syntaxe">Syntaxe</h2>

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

<h3 id="Valeurs">Valeurs</h3>

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

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Synonymes_pour_page-break-inside">Synonymes pour <code>page-break-inside</code></h2>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><code>page-break-inside</code></th>
   <th scope="col"><code>break-inside</code></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>auto</code></td>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <td><code>avoid</code></td>
   <td><code>avoid</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="exemple"&gt;
  &lt;p&gt;« 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. »&lt;/p&gt;
  &lt;p&gt;« 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. »&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","400","300")}}</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', '#break-within', 'break-inside')}}</td>
   <td>{{Spec2('CSS3 Fragmentation')}}</td>
   <td>Aucune modification.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
   <td>{{Spec2('CSS3 Regions')}}</td>
   <td>Ajout de la gestion des ruptures de région.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
   <td>{{Spec2('CSS3 Multicol')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.break-inside", 4)}}</p>

<h3 id="Notes_relatives_à_la_compatibilité">Notes relatives à la compatibilité</h3>

<p>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.</p>

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