Page-break-before doesn't work with IE.

I came across the requirement to print web page using JavaScript. Normally, If we need to add page break while printing the web page, we use "page-break-before" property in CSS. But "page-break-before" does not work with Internet Explorer (IE) browser. Here, I'll show you how we can achieve the desired behavior.

Resolution:

Below is the HTML snippet which is generated using JavaScript. Here, we want to add page break before each Div element. So, I've used "page-break-before:always" style property in each Div element. It will break the page while printing web page. It works fine with "Chrome" or "Mozilla" browsers but it doesn't work with Internet Explorer (IE) browser.

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div style="page-break-before:always;"></div>
<!-- content block -->
<!-- content block -->
<div style="page-break-before:always;"></div>
<!-- content block -->
<!-- content block -->
<!-- content -->

To have "page-break-before:always" property working in all browsers including Internet Explorer, we need to add one extra Div tag (highlighted) with empty space (" ") as shown in below code snippet.

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div style="page-break-before:always;"></div>
<div>&nbsp;</div>
<!-- content block -->
<!-- content block -->
<div style="page-break-before:always;"></div>
<div>&nbsp;</div>
<!-- content block -->
<!-- content block -->
<!-- content -->

If you have any questions you can reach out our SharePoint Consulting team here.