I'm creating a print stylesheet, and trying to use break-after: avoid to keep headings on the same page as the following paragraph, but it doesn't seem to work.
To inves… (read more)
I'm creating a print stylesheet, and trying to use break-after: avoid to keep headings on the same page as the following paragraph, but it doesn't seem to work.
To investigate, I created a simple page with an
in between a number of paragraphs to that the <h2> printed as the last item on the page. I then added the following styles.
@media print {
h2 {
break-after: avoid;
}
}
I expected the heading to move to the next page, but nothing happened. So then I added the following:
CSS:
@supports (break-after: avoid) {
.message {
display: block;
}
}
HTML:
break-after: avoid is supported.
When I refreshed the page, the message appeared.
So is break-after supported or not, or is it not supported for paged media? Or if it is supported, what am I doing wrong?
MDN suggests it's been supported since Firefox 65, but maybe I'm misunderstanding the compatibility table.
Thanks in anticipation. If this is the wrong forum to ask this question, perhaps somebody could direct me to the correct one.
