[print style]css style page-break-after not working

[topul]

• Electron version: 1.4.10
• Operating system: win10/x64

Expected behavior

page break normally when print

Actual behavior

css style page-break-after not working

How to reproduce

I have set all of this:

page-break-after: always;
page-break-inside: avoid;
-webkit-region-break-inside: avoid;

but it still does not work.

[MarshallOfSound]

What is the behavior in chrome with your styles and HTML?

I know from experience that making page-break-*do what you want it to do can be very tricky 😆

[topul]

@MarshallOfSound maybe the same to the electron, i had searched many methods to solve this question,but all of it didn't work.

google-chrome-printing-page-breaks

maybe it's the chrome's bug, it really bugs me

[MarshallOfSound]

It's not a Chrome bug, my research a looonnggg time ago when I had this issue led me to believe that this is caused by the spec not required the CSS props be applied to all elements.

https://www.w3.org/TR/CSS21/page.html#page-break-props

There is a working draft of a new spec that applies to the prop to all elements.

https://drafts.csswg.org/css-page-3/#page-break-inside

I would read through those specs to better understand what elements it can be applied to. There is also MDN as a good reference. https://developer.mozilla.org/en/docs/Web/CSS/page-break-inside

But if Chrome responds the same was as Electron then we can't do much about it. Especially in this case where they are probably just strictly implementing the spec (so it's not technically a bug)

[topul]

OK, i will look,thx for regurds,closed the issue

[alxmrtnz]

@topul I know this has been closed now for several years, but were you ever to figure out the issue? I'm also having an issue trying to get page-break-after/page-break-before working for printToPdf()

[DanielFrugoni-dev]

@alxmrtnz having the same problem, cant find the solution

[bjbk]

I found that if working with flexbox there is an issue in Chromium if trying to implement break-inside: avoid-page; or even the older page-break-{where} syntax. This Stackoverflow answer shed some light. For print stylesheets, there likely is no need for responsive design so removing flexbox from the elements helped.