Formate une date/heure locale en tant qu'entier
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.
La Syntaxe CSS break-after
break-after: auto|all|always|avoid|avoid-column|avoid-page| avoid-region|column|left|page|recto|region|right|verso|initial|inherit;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.breakAfter="always" |
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émentall 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".
Exemple Copier le code
<!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.
La Syntaxe CSS break-before
break-before: auto|all|always|avoid|avoid-column|avoid-page| avoid-region|column|left|page|recto|region|right|verso|initial|inherit;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.breakBefore="always" |
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émentall 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".
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>La propriété css break-before</title>
<style>
h1 {
color: #008000;
text-align: center;
font-size: 3rem;
column-span: all;
}
h2 {
color: green;
break-before: column;
}
p {
line-height: 1.5;
}
div {
column-width: 250px;
gap: 30px;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green;">
www.oujood.com
</h1>
<div>
<h2>oujood 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu lobortis elementum nibh tellus molestie nunc non.
</p>
<h2>oujood 2</h2>
<p>
Ac turpis egestas maecenas pharetra convallis posuere. Erat nam at lectus urna duis convallis. Tincidunt vitae semper quis lectus nulla at volutpat diam. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec.
</p>
<h2>oujood 3</h2>
<p>
In nibh mauris cursus mattis molestie a. Pretium viverra suspendisse potenti nullam ac tortor. Cursus in hac habitasse platea dictumst quisque sagittis purus. Id aliquet lectus proin nibh nisl condimentum id venenatis.
</p>
</div>
</body>
</html>