Add or Avoid Page Breaks in HTML PDFs: A Guide

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

1. Open the webpage in Chrome, Edge, or Firefox.
2. Press F12 (or Ctrl + Shift + I / Cmd + Option + I on Mac) to open Developer Tools.
3. Click on the Elements tab and find the section near the top.
4. Right-click the tag and choose Edit as HTML.
5. Scroll to the bottom of the section (just before ) and add this:

6. Click outside the edit box to apply the changes.
7. Press Ctrl + P (Windows) or Cmd + P (Mac), preview your PDF, and save it.

Insert a