Which Browsers Support Page Break Manipulation Using CSS and the Page-Break-Inside Element

Internet Explorer (IE11) ignores CSS break-inside: avoid

Change in your container display: flex to display:inline-flex and it works in ie:

.container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

CSS columns break elements apart in Chrome even with break-inside:avoid;

This is due to a lack of support. From caniuse.com:

WebKit- and Blink-based browsers do have equivalent support for the
non-standard -webkit-column-break-* properties to accomplish the same
result (but only the auto and always values)

Update

It means the -webkit-column-break-inside: avoid; is not supported in WebKit- and Blink-based browsers, like Chrome (as it is WebKit-based).

CSS Paged Media: Cannot achieve desired breaking behaviour (break-after, break-before doing nothing)

After giving up for just about two years and only just now deciding to look into this again, I've found my answer. The problem comes from the fact that my document uses CSS Grid to lay content out side-by-side. As per this answer, the W3 specification for this sort of behaviour is still in the candidate stage.

So, it looks like I was just a little bit ahead of the curve. At the very least, there doesn't seem to be anything wrong with the CSS code itself /p>

CSS Page Break Before (Left & Right) Not Working

It looks like the only browsers that currently support:

page-break-before: left|right
page-break-after: left|right

Are Internet Explorer, Edge, and Opera Mini
(Source: http://caniuse.com/#feat=css-page-break)

Other browsers typically default to "always" if "left" or "right" is used which explains the results in the initial question.

How to fix IE support for line break using CSS pseudo-element?

IE 11 recognizes the :before pseudo-element, but it just does not render a pseudo-element that contains nothing but a line break. Whether this is correct is an interesting question, but to circumvent the issue in your case, put e.g. a no-break space (U+00A0) there before the line break. That is, replace content: "\a" by content: "\a0\a".

On the other hand, it would be easier and more flexible to set a top margin on the h3 element rather than use generated content to add an empty line.

I don’t know why IE dev tools show the settings as struck-through. This seems to be a bug/feature in those tools, since the strike-through appears even when the code is modified as suggested above, in which case the CSS has visible effect. The same applies to using, say, content: "*" for testing.

---

Related Topics