---
title: "💭 page-break-after - CSS: Cascading Style Sheets | MDN"
description: "!https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after"
date: 2023-11-30
published: true
tags:
  - webdev
  - css
  - thought
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://developer.mozilla.org/mdn-social-image.46ac2375.png" alt="page-break-after - CSS | MDN — The page-break-after CSS property adjusts page breaks after the current element." loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">page-break-after - CSS | MDN</div>
      <div class="embed-card-description">The page-break-after CSS property adjusts page breaks after the current element.</div>
      <div class="embed-card-meta">MDN Web Docs &middot; developer.mozilla.org</div>
    </div>
  </a>
</div>


I'm working on something that might go to print, so I want the page breaks to happen somewhat in my control as the content author.  As I do my writing I break my content up in to many short sections using h2, sometimes an h3.  These are generally short sections that go together, should stay together, and typically are not too lengthy to cause a large white space in print.

I found a way in css to only allow page breaks to happen on h2 and h3, and it turned out perfect, suck it WSIWIG editors


``` css
* {
  page-break-before: avoid;
}

h2,
h3 {
  page-break-before: auto;
}
```

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>
