Definition of CSS page-break-after Property
CSS page break after is defined as the CSS property that helps to add a page-break after the element box and is only visible while printing. This property talks on at what page the respective content should stay meanwhile ensures that some content is exactly the last block to display on a print preview. And this property cannot be applied on position (absolute), empty <p> or <div> element. If style sheets are been used it is necessary to wrap a section by adding @media print { }.
Syntax:
The general syntax is given below:
<style>
page-break-after: auto|always|avoid|left|right|initial|inherit;
</style>And this styling gives a note that as soon as the paragraph is ended it should start printing on the next new page. We shall apply the above rule on a page and the breaks can likely be applied after certain elements instead on after every paragraph.
How page-break-after Property Work in CSS?
The Possible values of them are stated below:
- auto: This is the initial value by default and performs automatically. This value neither does make force nor forbid a break after the element when necessary.
- always: This value always forces to insert a page-break after the specified element.
- avoid: As the name implies this value avoids the broken property after the element.
- right: This force to give a page break because the next page is assigned to start on the right page.
- left: This force to give a page break because the next page is assigned to start on a left page. If the specified page is left and we want the content to be displayed on the left page then it is necessary to break the existing page.
- initial: It sets the property to its default value.
- inherit: It inherits the property from the parent element.
Examples of CSS page-break-after
Now we shall discuss the page- break after property by exploring examples in CSS. Here is the example for the page break property with values.
Example #1 – Performing Default Value Auto
Code:
<html>
<head>
<style type = "text/css">
div{
font-size: 15px;
page-break-after: auto;
}
</style>
</head>
<body>
<div>
<h1>EDUCBA</h1>
<h1>Learn the latest skills for your career</h1>
</div>
<div>
This Professional Website helps to do deep learning from leading companies and industries to achieve Professional goals.
</div>
<br>
<button onclick = "select()">Print the complete Page</button>
<script>
function select() {
window.print();
}
</script>
</body>
</html>So, the above code executes like when you press the button it directs to the printing page. The property value is ‘auto ‘it forces the element button to do the action.
Try changing the value to ‘always’ you could see the difference in the output like the <div> element doesn’t work in the print preview.
Output:
Example #2
HTML code for the value ‘always’. In this, the CSS property is set to ‘always’.
The following tags are placed in the HTML page and it is printed using a browser we could see three pages.
Code:
<html>
<head>
<style>
.demo {
page-break-after: always;
}
</style>
</head>
<body>
Page Break Border Property
<p class="demo"> The general Syntax is given.</p>
A paragraph Description.
<p> This is quite wague ! </p>
</body>
</html>Output:
Example #3
Using avoid Page Breaks. Avoiding page break whenever it is needed.
Code:
<html>
<head>
<style type = "text/css">
h2{ color:magenta}
div{
font-size: 13px;
font-family: Helvetica;
page-break-after: avoid;
}
</style>
</head>
<body>
<div>
<h2>Clothing Store</h2>
<h2>Best Online shopping at door step- Macys Shop</h2>
</div>
<div>
We have a latest trendy clothes and we hit by limiting the day orders from our warehouse for quite some times. We just landed with some few collections from top brands. We offer you a great service with great style with little inspirations.
</div>
<br>
<button onclick = "shop()">print the content</button>
<script>
function shop() {
window.print();
}
</script>
</body>
</html>Output:
The next snippet shows that in the current page there is no page break and the page is ended.
Example #4 – With Inherit Property
Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Break after- Inherit</title>
<style>
p {
page-break-after:always;
}
div{
page-break-after:default;
}
#ctt{
page-break-after:left;
}
#fil{
page-break-after:inherit;
}
</style>
</head>
<body>
<h1> Article On Sweden</h1>
<p>
Sweden is a multicultural country, means most of the people are from another country. Stockholm is the capital of Sweden and Swedish is their official language while some speak English. Coming to the national Government it's a parliamentary democracy which are sectored into two groups: Left and green party
</p>
<div>
<p id="fil">
Coming to the national Government it’s a parliamentary democracy which are sectored into two groups: Left and green party. It is considered to be an innovative nations and so called digitally connected economy
</div>
<p id="ctt">
They live a relaxed luxurious Life. They follow the equality and fairness of words. In point of environment, they have high esteem nature with high fi technology involved in wind power, biofuels and solar power.
</p>
</body>
</html>Output:
Example #5 – Using the Left Value
Here Page break specified displays the content and starts on a left page. The browser breaks two pages to show the changes.
Code:
<html>
<head>
<style type = "text/css">
div{
font-size: 15px;
page-break-after: left;
}
</style>
</head>
<body>
<div>
<h2>Welcome to the Home Page</h2>
<h2>Booking Airline </h2>
</div>
<div>
This is the Legendary airline service which shows the flights Schedules.
</div>
<br>
<button onclick = "aab()">Give a copy of this Page</button>
<script>
function aab() {
window.print();
}
</script>
</body>
</html>Output:
Example #6 – Using the Right Value
Code:
<html>
<head>
<style type = "text/css">
h2{ color:purple}
div{
font-size: 12px;
font-family: Arial;
page-break-after: right;
}
</style>
</head>
<body>
<div>
<h2>Gaming Related Site</h2>
<h2>Highly Ranked World-Wide</h2>
</div>
<div>
We Offer a free Online Game which is highly trending. And this portal is mobile-friendly and everything could be converted to HTML5. And has a feature of free member Access. Since we live in the changing evolving world our games are completely different with unique mechanisms and mostly liked by the user agent.
</div>
<br>
<button onclick = "game()">View the preview</button>
<script>
function game() {
window.print();
}
</script>
</body>
</html>Output:
When you press the preview button the next page displays as below in which when you scroll the bar, we could able to see the content after the page break in the next page.
Recommended Articles
This is a guide to CSS page-break-after. Here we also discuss the definition and how page-break-after property work in css? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
