La propriété break-after indique si un saut de page, un saut de colonne ou un saut de région doit se produire après ou avant l'élément spécifié. La propriété break-after étend la propriété page-break-after de CSS2.
Définition et utilisation da la propriété css break-after
La propriété break-after vous permet de placer un saut de page dans les contextes multi-régions, les médias paginés et les mises en page multi-colonnes. Cette propriété décrit le comportement du saut de région, de colonne ou de page après la boîte générée. Cette propriété est ignorée s'il n'y a pas de boîte générée du tout.
En utilisant la propriété break-after, vous pouvez indiquer au navigateur de rompre la page, la colonne ou la région après l'élément auquel la propriété break-after est appliquée, ou éviter que l'élément soit divisé et s'étende sur deux pages.
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
Explorateur
Verssion
50
10
65
10
37
Valeurs de la propriété break-after
auto Par défaut. Saut de page/colonne/région automatique après l'élément all Toujours insérer un saut de page juste après le cadre principal always Toujours insérer un saut de page après l'élément avoid Éviter un saut de page/colonne/région après l'élément avoid-column Évitez un saut de colonne après l'élément avoid-page Évitez un saut de page après l'élément avoid-region Évitez un saut de région après l'élément column Insérez toujours un saut de colonne après l'élément left Insérez un ou deux sauts de page après l'élément pour que la page suivante soit formatée comme une page de gauche. page Insérez toujours un saut de page après l'élément recto Insérez un ou deux sauts de page après le cadre principal pour que la page suivante soit formatée comme une page recto. region Insérez toujours un saut de région après l'élément right Insérez un ou deux sauts de page après l'élément pour que la page suivante soit formatée en page droite verso Insérer un ou deux sauts de page après le cadre principal afin que la page suivante soit formatée comme une page verso. initial Définit cette propriété à sa valeur par défaut. inherit Hérite de cette propriété de son élément parent.
Exemple : L'exemple ci-dessous illustre l'utilisation de la propriété "break-after".
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>La propriété css break-after</title>
<style>
.Container {
column-count: 3;
column-rule: 2px dotted olivedrab;
}
.Container hr {
break-after: column;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green;">
www.oujood.com
</h1>
<div class="Container">
<h2>oujood 1</h2>
<p>
Elementum nibh tellus molestie nunc non. In pellentesque massa placerat duis ultricies lacus sed turpis. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Velit sed ullamcorper morbi tincidunt ornare massa. Tincidunt eget nullam non nisi est sit amet. Urna molestie at elementum eu. Leo urna molestie at elementum eu. Semper viverra nam libero justo. Quis viverra nibh cras pulvinar. Diam volutpat commodo sed egestas. Ultrices dui sapien eget mi proin sed. Libero volutpat sed cras ornare arcu dui.
</p>
<hr>
<h2>oujood 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sapien et ligula ullamcorper malesuada proin libero. Imperdiet dui accumsan sit amet nulla. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Sit amet mauris commodo quis.
</p>
</div>
</body>
</html>
Définition et utilisation da la propriété css break-before
La propriété break-before indique si un saut de page, un saut de colonne ou un saut de région doit se produire avant l'élément spécifié.
En utilisant la propriété break-before, vous pouvez indiquer au navigateur de rompre la page, la colonne ou la région avant l'élément auquel la propriété break-before est appliquée, ou éviter que l'élément soit divisé et s'étende sur deux pages.
Cette propriété est ignorée s'il n'y a pas de boîte générée.
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
Explorateur
Verssion
50
10
65
10
37
Valeurs de la propriété break-before
auto Par défaut. Saut de page/colonne/région automatique avant l'élément all Toujours insérer un saut de page juste avant le cadre principal always Toujours insérer un saut de page avant l'élément avoid Éviter un saut de page/colonne/région avant l'élément avoid-column Évitez un saut de colonne avant l'élément avoid-page Évitez un saut de page avant l'élément avoid-region Évitez un saut de région avant l'élément column Insérez toujours un saut de colonne avant l'élément left Insérez un ou deux sauts de page avant l'élément pour que la page suivante soit formatée comme une page de gauche. page Insérez toujours un saut de page avant l'élément recto Insérez un ou deux sauts de page avant le cadre principal pour que la page suivante soit formatée comme une page recto. region Insérez toujours un saut de région avant l'élément right Insérez un ou deux sauts de page avant l'élément pour que la page suivante soit formatée en page droite verso Insérer un ou deux sauts de page avant le cadre principal afin que la page suivante soit formatée comme une page verso. initial Définit cette propriété à sa valeur par défaut. inherit Hérite de cette propriété de son élément parent.
Exemple : L'exemple ci-dessous illustre l'utilisation de la propriété "break-before".