Page breaks matter when saving a webpage as a PDF. Avoid split images and awkward text flow with these simple tricks to control where breaks happen.
Saving a webpage as a PDF sounds simple—and for the most part it is. But the formatting can be all over the place, especially when it comes to pages breaking in weird spots. Sometimes this might involve images being cut in two, but mostly it will see paragraphs being split at weird points, and random white spaces throughout.
This happens because browsers and PDF generators handle page breaks differently. Webpages are designed for screens and free scrolling, while PDFs are designed for pages and paper sizes. So, when saving HTML as PDFs, the content is broken up based on page length.
But you can take control of where these breaks happen—and where they don’t—using CSS, or by converting the saved PDF to Word.
How to Force Page Breaks for a More Organized PDF
When developing web pages for your own site, you—or your developer—can design it so certain elements always start on a new page (like a heading or an image) when saving the page as a PDF. Here, CSS lets you tell the browser exactly what to do.
- Use page-break-before: always; to start a new page before an element.
- Use page-break-after: always; to start a new page after an element.
- Use break-inside: avoid; to keep elements like tables or images from being split across pages.
For example, if you want to make sure your headings never get stranded at the bottom of a page:
If an image is getting cut in half when you save a webpage as a PDF, you can try this:
If your website uses a single CSS file to control the style and layout of all pages, this code can be added to it to automatically apply when any page is saved as a PDF. Saving you, or your developer, from having to manually add it to each page.
How to Add Page Breaks to Someone Else’s Web Page Before Saving as a PDF
Of course, many times when you’re saving an HTML webpage as a PDF, it will be from someone else’s website. But you can still add page breaks!
Since you can’t edit the original site, the trick is to inject temporary CSS using your browser’s Developer Tools. Don’t worry—it’s easier than it sounds and disappears as soon as you refresh the page. Here’s how:
Add Page Break Rules in the head Section
- Open the webpage in Chrome, Edge, or Firefox.
- Press F12 (or Ctrl + Shift + I / Cmd + Option + I on Mac) to open Developer Tools.
- Click on the Elements tab and find the section near the top.
- Right-click the tag and choose Edit as HTML.
- Scroll to the bottom of the section (just before ) and add this:
- Click outside the edit box to apply the changes.
- Press Ctrl + P (Windows) or Cmd + P (Mac), preview your PDF, and save it.
Adding temporary page breaks to someone else’s website
Insert a <style> Tag Directly in the <body>
If you can’t find the
section or want a quicker way, you can add the style rules inside the webpage’s body content instead:- Open Developer Tools (F12 or Ctrl + Shift + I / Cmd + Option + I).
- Scroll down in the Elements tab and find the tag.
- Right-click it and choose Edit as HTML.
- At the very top of the section, insert this:
- Click outside to save the changes.
- Print the page (Ctrl + P / Cmd + P) and check the page breaks.
Since this method is temporary, refreshing the page will wipe out your changes—so make sure to save your PDF before that happens.
Troubleshooting Page Break Issues
If your page breaks still aren’t behaving, here’s what to check:
Conflicting CSS Rules
If one rule says to avoid breaks and another forces them, the browser might ignore both.
Margins and Padding
Large margins or padding can push content around in unexpected ways. There’s no easy fix for this, since changing margins and padding could affect how your site looks in browsers. The best way to overcome this would be to convert the PDF to Word (after exporting a webpage as a PDF), and then manually correct formatting issues using Microsoft Word. The document can be saved as a PDF again once you’re done formatting.
Media Queries
Some CSS settings apply only on-screen but don’t carry over to PDFs. Use @media print to set specific styles for printing.
Adding and avoiding page breaks in HTML PDFs does require some technical skill, but not too much. If you feel too intimidated by this, get your website developer to help you, or go the route of adding page breaks using Microsoft Word. With the latter also offering you more options for tweaking the formatting of the document.
