3

I am using Windows 10 with Chrome 79.0.3945.130. I have HTML documents that contain <h3> tags. When printing, I would like to avoid page breaks immediately after these tags.

The natural way to prevent page breaks seems to be to use the CSS break–after property. And I find that it works in Microsoft Edge. But I can't get it to work in Chrome or in the current, Chromium-based version of Edge. Here is a minimal example:

<html>

  <head><title>Getting CSS page breaks to work</title></head>

  <body>

    <style>
      h3 { break-after: avoid; }
      .tall { 
        height: 9.5in;
        background-color: blue;
      }
    </style>

    <div class="tall"></div>

    <h3>Section heading</h3>
    <p>Lorem ipsum dolor.</p>

  </body>
</html>

When I print that document in an old version of Edge (~v44), it prints as it should. But when I print it in Chrome or the current version of Edgs (v83), the <h3> header appears at the bottom of the page, and the following <p> text appears at the top of the following page. Breaking the page between <h3> and <p> is what I want to prevent.

I can get around the problem by wrapping both the <h3> and the <p> tag in a div and setting break–inside: avoid for that div. But this solution is unsatisfactory: it is ad hoc, requiring me to first identify all of the cases in which inappropriate breaks appear.

I have tried many variations on the example given here. For example, I've tried setting the break-* properties in conjunction with the ::after selector, as in h3::after { break-after: avoid; }. But I haven't succeeded in preventing page breaks.

There are also some related posts, for example:

  1. CSS Printing: Avoiding cut-in-half DIVs between pages?
  2. page-break/webkit-region-break not working in chrome anymore?)

but the advice given there doesn't help with the example given above.

What else can I do?

user697473
  • 2,165
  • 1
  • 20
  • 47
  • 2
    Looks like Chrome has not yet implemented the `break-*` handling, based on information [here](https://www.chromestatus.com/feature/5630943616303104). Not sure if making the `

    ` element `float:left` might help with the goal?

     – Paul T. Feb 08 '20 at 16:50
  • Thank you, @PaulT. Adding `float:left` doesn't help, but the Chrome Platform Status note to which you linked is helpful. What a shame that Chrome doesn't have good support for the `avoid` value. – user697473 Feb 08 '20 at 17:20
  • Other CSS styling may be needed, besides float, but I'm not sure what. That was simply the first style considered. – Paul T. Feb 08 '20 at 17:22
  • More detail on the Chromium/Chrome/Edge bug at https://bugs.chromium.org/p/chromium/issues/detail?id=223068. Apparently, the Chromium developers are working on it...but it sounds as though it'll take a while to fix. – user697473 May 26 '20 at 18:00
  • 1
    This is the best solution I found: https://stackoverflow.com/a/53742871/1927583 – ba_ul Jul 30 '21 at 16:48

0 Answers0