break-before, break-after, and break-inside do nothing

106
January 01, 2020, at 10:40 PM

I'm trying to keep an element from getting cut in half when I print the page, but for some reason the CSS properties break-before, break-inside, and break-after do absolutely nothing. I've tried every combination of them I can think of on several elements on the page. Is there some kind of gotcha with these properties? One answer said I can't have float elements (which I'm not using anyway), so I added this to my global styles:

@media print {
  * {
    float: none;
  }
}

I also tried defining a CSS class specifically for forcing page breaks:

.page-breaker {
  @media print {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}

But this element also has no effect.

Why is this happening? Why are these properties so difficult to use?

EDIT: I'm testing in Chrome Chrome 79.0.3945.88 on OSX 10.14.6.

READ ALSO
Mix-Blend mode doesn't work on custom cursor

Mix-Blend mode doesn't work on custom cursor

I would like to add a mix-blend-mode: difference to the inner cursor, but I can't get it to workI heard that the position: fixed applied to the cursor may cause the problem here

232
HTML, CSS, JavaScript modal and many pages

HTML, CSS, JavaScript modal and many pages

I have an HTML page that has a modal popup window on itThe page has Javascript and CSS and works fine

87
CSS Emotion is caching CSS despite variables

CSS Emotion is caching CSS despite variables

I'm using Emotion for CSS in a React projectIt's working correctly but I have one component that uses the css property with JS arguments and it seems Emotion is caching the CSS despite the variables changes

74