{"id":18136,"date":"2013-09-16T21:01:09","date_gmt":"2013-09-16T13:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18136"},"modified":"2025-04-04T01:37:27","modified_gmt":"2025-04-03T17:37:27","slug":"css3-page-break","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-page-break\/","title":{"rendered":"How to Use CSS3 Page Breaks to Organize Printed Web Pages"},"content":{"rendered":"

While we live in a digital era where most content is easily accessible online, many people still prefer reading long-form text on paper. It\u2019s possible that some of your users will print out your content to read offline.<\/p>\n

The ability to style content specifically for print has been around for years. This can be achieved using the @media<\/code> rule within your stylesheet, like so:<\/p>\n

\r\n@media print {\r\n  \/* Style rules *\/\r\n}\r\n<\/pre>\n
There are several properties that allow us to format web content for print, and today we\u2019ll focus on one of them: Page Break<\/strong>.<\/p>\n
What Does It Do?<\/h2>\n
If you\u2019ve used word processors like Microsoft Word or Pages, you\u2019re likely familiar with the Page Break<\/strong> feature, which lets you move content to the next page.<\/p>\n
\"Example<\/figure>\n
The CSS Page Break feature does the same thing \u2013 allowing you to control how your web content is split across pages when printed.<\/p>\n
Using Page Break<\/h2>\n
For demonstration, let\u2019s consider a sample page that I intend to print. Initially, there is an awkward break, as shown below.<\/p>\n
\"Example<\/figure>\n
It would be better if the heading and orphan text<\/a> started on the next page.<\/p>\n
To achieve this, you can use the page-break-after<\/code> property and set its value to always<\/code>, forcing the next element to \u201cbreak\u201d onto the following page.<\/p>\n
\r\n.page-break {\r\n  page-break-after: always;\r\n}\r\n<\/pre>\n
You can then either create a new element with this class between the elements or apply the class to the preceding element, like so:<\/p>\n
\r\n<p class=\"page-break\">With the <strong>Eraser<\/strong> feature, you can take composites of a photo, then put them together to get the background without the extras you don't want. <\/p>\r\n\r\n<h3>The phone to travel with<\/h3>\r\n<p><strong>S Translator<\/strong> is going to be a great tool for your travels as...<\/p>\r\n<\/pre>\n
Now, the heading and the orphaned text should appear on the next page.<\/p>\n
\"Page<\/figure>\n
Widows and Orphans<\/h2>\n
The method above can be tedious for large amounts of content. Instead of manually forcing page breaks, it\u2019s more efficient to set a minimum threshold for widows<\/strong> and orphans<\/strong>.<\/p>\n
In typography, widows and orphans are terms used to describe words or short lines left behind on a different page than the rest of the paragraph.<\/p>\n
By using the orphans<\/code> and widows<\/code> properties, you can specify a minimum threshold. For example, the following code ensures at least three lines remain at the bottom or top of paragraphs where page breaks occur:<\/p>\n
\r\np {\r\n  orphans: 3;\r\n  widows: 3;\r\n}\r\n<\/pre>\n
Further Resources<\/h2>\n
We\u2019ve covered the basics of controlling page breaks in printed media for your web content. Considering print styles in your website\u2019s design ensures your content looks good both on screen and on paper.<\/p>\n
For more detailed information, you can refer to the following resource:<\/p>\n