As you’re probably already aware, CSS lets you completely dictate how your HTML elements behave — how they’re positioned, what they look like, colors, shapes, etc — on a webpage. BUT, did you know you can also use CSS to dictate how particular elements are meant to behave when a page or document is printed? This sort of CSS sorcery can be done using the page break properties, which is actually a set of three properties (page-break-before, page-break-after, and page-break-inside) that is used to determine where a page break should occur in relation to selected elements.
In this tutorial, we’re going to go over each of the page-break elements to make sure you understand what their function is and exactly how you might use them in context.
To use any of these properties, you must designate them as paged media, so be sure to use them within the print media queries, like this:
@media print{
h1{
page-break-inside: avoid;
}
}
Page-Break-Before
The page-break-before property is used to add a page break before the selected element. To make sure a page break occurs before the element in question, you’ll need to apply the value “always” to the page break property. So, to be sure that the page breaks before a div element with the class of .main, for example, your code would need to look something like this:
div.main{
page-break-before: always;
}
In addition to always, other values that this property takes are auto (this is the default), avoid (this value would dictate that a page break before the element should be avoided), left (this forces a page break so that the next page is formatted as a left page), and right (this forces a page break so that the next page is formatted as a right page). The property also takes the values initial and inherit.
Page-Break-After
The page-break-after property is just about the same as the page-break-before property, only this property (as you might be able to guess) makes sure that the page breaks after the selected element, not before. So, for example, to have the page break after the div element with the class of .main, your CSS would need to look like this:
div.main{
page-break-before: always;
}
The page-break-after property also accepts all of the same values as the page-break-before property, so they really are very similar.
Page-Break-Inside
The page-break-inside property refers to the page breaking inside of the element that’s selected. So if you wanted the page to break right in the middle of a paragraph, you could use this property to do that. Interestingly though, you can also use this property to make sure that a page doesn’t break right in the middle of a paragraph by applying the avoid value to the property, like this:
p{
page-break-inside: avoid;
}
The code above applies to all paragraph elements on a page, so if you’re not a fan of page breaks that occur mid-paragraph, this is a good line of code to add to your CSS if your web pages are likely to be printed and you want to make sure that the presentation is the best it can be. The page-break-inside property only takes the values avoid and always (and initial and inherit), and does not take the right or left values like the other two page-break properties do, so be sure to keep that in mind when you’re coding.