4

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!

5
  • 2
    No one can debug an image ... so: Questions seeking help ("why isn't/how to make this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a minimal reproducible example.
    – Asons
    May 5, 2019 at 9:22
  • 1
    "I don't care for support for old browsers" - not good approach. "I'm using the latest Chrome version" - your choice, no doubt about it. "my users had to use it too" - very bad. There might be dozen of reasons why the user has to use older version of any kind of web browser such as HW, OS limitations, company policy, and many more.
    – ino
    May 5, 2019 at 9:27
  • 1
    I understand that perfectly, it's just that I'm doing this for my mom first and the priority is to get a minimally working product first. Of course if you tell me it is reasonably as easy I'd do it for any browser.
    – Alberto
    May 5, 2019 at 9:33
  • 2
    It's hard to help when we there isn't a reproducible example of your problem, did you set the any margins for print, IE @page { size: auto; margin: 25mm 25mm 25mm 25mm; }
    – Lars
    May 5, 2019 at 14:44
  • Yes, I've just added that, margins are of 2cm and size: A4. If anything else is missing please tell me.
    – Alberto
    May 5, 2019 at 15:32

1 Answer 1

5

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! :)

1
  • 1
    Your 6 hours saved me a ton of time. Legend. Many thanks. Cheers
    – jfudman
    Nov 18, 2022 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.