htmlcsscss-paged-media

HTML+CSS page breaks cutting text characters in half (@media print)

After switching to nested ordered lists, each having one or more li with a div, I get horrible page-breaks that cut the text in half. I wouldn't mind if the content had a page-break, but having it break mid-text-characters in the page margin is not acceptable.

Example html (arbitrarily-deep ol + li + ol + ... nesting not known until runtime - single page content generated in react):

I've already placed css to avoid page-breaks over images and the class "avoid-break" in the question classes as well:

.TestEditorQuestion {
  position: relative;
  border: 3px;
  background-color: #eee;
  border-color: gray;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: .08rem;
  padding-bottom: .08rem;
  margin: 5px;
  text-align: left;
  border-radius: 10px;
  width: 99%;
  display: block;
  height: 10%;
  box-sizing: border-box;
}

... lots of css code that doesn't affect this

avoid-break {
  break-inside: avoid;
  page-break-inside: avoid; // for older browsers
}

@media print {
  .no-print,
  button {
    display: none !important;
  }
  @page {
    size: A4;
    margin: 1.5cm;
    @bottom-center {
      content: counter(page) "/" counter(pages);
    }
  }
}
<ol>
  ...
  <li>
    <div class="TestEditorQuestion avoid-break">
      <p>() Dois ou mais .... (long text) ...</p>
    </div>
  </li>
  <li>
    <div class="TestEditorImage avoid-break">
      <img ...>...</img>
      <p> ... long question text ...</>
  </li>
  ....
</ol>

Example of the broken print layout with cuts in the text itself:

Example of broken page Other example with a div of class "avoid-break" with an image and a caption (paragraph): enter image description here Yet another example of a page-break cutting the text of a question that has the avoid-break CSS class: enter image description here

I want to build an MVP first so if using the latest chrome/firefox version is needed I'm ok with it for now.

How do I stop the browser from cutting the text characters in half at page breaks?

I have a lot of code in this app and mostly not related at all to this issue, so I've tried to leave that out, but if you need extra info please request it and I'll provide it.

Thank you!

Solution

  • Apparently, after some 6 hours trying to debug this and making a simpler example to put here for reproduction I found out that the simple example always worked and that was because I didn't put a containing div that for the print had overflow:auto.

    Just by changing that to overflow: visible, all breaks work!

    Apparently that is because browsers don't support any other kind of overflow.

    Thank you all for your time, hadn't you constantly requested a reproducible example we wouldn't have this fixed! :)