Search code examples
csspage-break

CSS page-break-inside:avoid; not functional

I have been advised that said CSS page-break-inside:avoid; would prevent elements being printed between 2 pages.

On this directions print out this simply does not work on all tested browsers so far. The CSS .instruction has this applied yet prints across pages.

Example: http://www.golfbrowser.com/A4/directions.php?start=PARIS&end=SL42ES

Any ideas?

Solution

  • Just add a print stylesheet or use a media query and a breaking div or just add the style to the elements in your html that need braking when printing.

    Try adding this after every long block of content that you think needs breaking:

    <div class="break">&nbsp;</div>

    And as for your css just add this:

    .break {
  display:none;
} //place inside your regular stylesheet file

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

    This method works in most modern browsers, including IE8+.