diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/page-break-inside | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/page-break-inside')
-rw-r--r-- | files/fr/web/css/page-break-inside/index.md | 194 |
1 files changed, 81 insertions, 113 deletions
diff --git a/files/fr/web/css/page-break-inside/index.md b/files/fr/web/css/page-break-inside/index.md index 3dc045c5ee..fc49a18b31 100644 --- a/files/fr/web/css/page-break-inside/index.md +++ b/files/fr/web/css/page-break-inside/index.md @@ -7,15 +7,14 @@ tags: - Reference translation_of: Web/CSS/page-break-inside --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<div class="warning"> -<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p> -</div> +> **Attention :** Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}. -<p>La propriété <strong><code>page-break-inside</code></strong> ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.</p> +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. -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ page-break-inside: auto; page-break-inside: avoid; @@ -23,73 +22,60 @@ page-break-inside: avoid; page-break-inside: inherit; page-break-inside: initial; page-break-inside: unset; -</pre> +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code>auto</code></dt> - <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd> - <dt><code>avoid</code></dt> - <dd>L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.</dd> -</dl> +- `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. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Alias_avec_break-inside">Alias avec <code>break-inside</code></h2> - -<p>La propriété <code>page-break-inside</code> a désormais été remplacée par la propriété {{cssxref("break-inside")}}.</p> - -<p>Pour des raisons de compatibilité, <code>page-break-inside</code> devrait être considérée par les navigateurs comme synonyme de <code>break-inside</code>. De cette façon, les sites utilisant <code>page-break-inside</code> pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances</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="HTML">HTML</h3> - -<pre class="brush: 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></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.page { +## 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-inside` | `break-inside` | +| ------------------- | -------------- | +| `auto` | `auto` | +| `avoid` | `avoid` | + +## Exemples + +### HTML + +```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 + +```css +.page { background-color: #8cffa0; height: 90px; width: 200px; @@ -113,50 +99,32 @@ ol, ul, .list { p:first-child { margin-top: 0; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", 400, 160)}}</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 Paged Media', '#page-break-inside', 'page-break-inside')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>Permet d'appliquer cette propriété sur plus d'éléments.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</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.page-break-inside")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("break-before")}}</li> - <li>{{cssxref("break-after")}}</li> - <li>{{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-after")}}</li> - <li>{{cssxref("page-break-before")}}</li> - <li>{{cssxref("orphans")}}</li> - <li>{{cssxref("widows")}}</li> -</ul> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 400, 160)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------- | +| {{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 + +- {{cssxref("break-before")}} +- {{cssxref("break-after")}} +- {{cssxref("break-inside")}} +- {{cssxref("page-break-after")}} +- {{cssxref("page-break-before")}} +- {{cssxref("orphans")}} +- {{cssxref("widows")}} |