CSS Print Breakpoints

I ran into an issue creating a printable cheatsheet with code blocks. Sometimes code blocks would get cut off on different pages, which made the cheatsheet hard to read.

I was informed that you can prevent this behavior using the CSS page-break-inside property.

Simply adding:

<style>
  @media print {
    .code-block, .row {
      page-break-inside: avoid;
    }
  }
</style>

to my HTML prevented the page breaks from happening where I didn’t want them 🙂