page-break-after: avoid works only in IE?

Question

I am unable to get this CSS to work in Chrome & Firefox.

p { page-break-inside: avoid; }
h1 { page-break-after: avoid; }

Html:

<h1>FOO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>FOO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
[..]

Chrome & Firefox will insert a page break after the <h1> element when printing.

Only IE keeps h1+p together.

The HTML is generated (by https://github.com/chjj/marked) so I'd rather like to solve this by CSS if possible.

JSFiddle: http://jsfiddle.net/QCvA5/86/
Output: http://jsfiddle.net/QCvA5/86/show/

check http://css-tricks.com/almanac/properties/p/page-break/ and http://stackoverflow.com/questions/14303178/page-break-doesnt-work-on-google-chrome — NoobEditor, Feb 04 '14 at 09:36
@NoobEditor thanks - I've seen those links before but none offer a workaround for this case. — laktak, Feb 04 '14 at 09:39
@laktak - did you ever find a solution for this? Running into the same issue and nothing I dig up online helps. — Steve, Nov 06 '17 at 19:50
@Steve - no, I switched technologies for my markdown conversion to pandoc — laktak, Nov 06 '17 at 21:19

score 0 · Answer 1 · answered Feb 04 '14 at 09:48

0

Try using -webkit-break-after: avoid; -webkit-break-inside: avoid;

answered Feb 04 '14 at 09:48

Muhammad

193
1
7

Chrome doesn't know those (unknown property). – laktak Feb 04 '14 at 10:49

page-break-after: avoid works only in IE?

1 Answers1