Propriété CSS break-inside
La propriété break-inside est une propriété CSS qui définit comment n'importe quelle brèche (page, colonne) doit se manifester dedans la boîte générée. Si la boîte générée est manqué, la propriété est ignorée. Elle a quatre valeurs: auto, avoid, always, all.
Cette propriété est obsolète.
| Valeur initiale | auto |
| Appliquée à | Éléments du niveau de bloc. |
| Héritée | Non. |
| Animable | Distincte. |
| Version | CSS3 |
| Syntaxe DOM | object.style.breakInside = "avoid"; |
Syntaxe
break-inside: auto | avoid | always | all | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.multicol {
background-color: #eee;
padding: 10px;
/* Safari and Chrome */
-webkit-column-count: 3;
-webkit-column-rule: 2px dotted #ccc;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 2px dotted #ccc;
/* CSS3 */
column-count: 3;
column-rule: 2px dotted #ccc;
}
.multicol hr {
break-inside: column;
}
</style>
</head>
<body>
<div class="multicol">
<h2>Lorem ipsum</h2>
<p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
<hr>
<h2>Lorem ipsum</h2>
<p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | Force une page/colonne à casser dans l'élément. |
| avoid | Évite d'une brèche dans l'élément. |
| avoid-page | Évite d'une brèche de page dans l'élément. |
| avoid-column | Évite d'une brèche de colonne dans l'élément. |
| avoid-region | Évite d'une brèche de région dans l'élément. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| 50.0+ | 12.0+ | 65.0+ | ✕ | 37.0+ |
Pratiquez vos connaissances
Qu'est-ce que la propriété CSS 'break-inside' permet de faire et quelles valeurs peut-elle prendre ?
Correcte!
Incorrecte!