6

I'm trying to make Chrome work with page-break for printing. I've found multiple topics here, and tried a lot of possible solutions, but non of them worked for me.

The topic's i've tried:

Google Chrome Printing Page Breaks, Page-Break-inside property is not working in chrome, CSS Page-Break Not Working in all Browsers

And more..

I've created a jsfiddle to show what i've got for code:
http://jsfiddle.net/bLezsLkr/1/

(can't post without code: CSS which is used)

@media print {
.pageBreak {
    page-break-after: always;
    -webkit-region-break-after: always;
    height: 2px;
    display: block;
    float: none;
}

.topinfo {
    -webkit-region-break-inside: avoid;
    -webkit-region-break-after: always;
    page-break-after: always;
    page-break-inside: avoid;
}

.blockTitle {
    page-break-after: avoid;
    -webkit-region-break-after: avoid;
}

.leftPix, img {
    -webkit-region-break-inside: avoid;
    page-break-inside : avoid;
}
}

Question:

Why does Internet Explorer print the page as i want, and why does Chrome print the page with the second row of colored blocks on 2 pages?

Community
  • 1
  • 1
Golovior
  • 125
  • 1
  • 13

2 Answers2

5

Make sure the element with page-break-after: always; is a block element. Another selector might be changing it to inline-block or something else which would prevent the break from being applied.

Also make sure the element is not within a floated element. Thanks RoadBump.

Charlie
  • 8,530
  • 2
  • 55
  • 53
  • 1
    Thank you. Because of your answer i checked the parent blocks and it seemed the parent block was a inline-block. After changing it into a block, all worked fine. Thank you! – Golovior Mar 23 '15 at 07:35
  • In addition, make sure that it or one of its parents are not `float`ed. This worked for me. – RoadBump Jul 27 '17 at 07:06
0

This works in chrome

 <p style="page-break-before: always">
satyender
  • 817
  • 4
  • 12
  • 27