Print html div without breaking its contents between two pages

Question

When i use window.print() to print my web page, the result will be several pages. I have some html div elements that must not be break between two pages. Although, because the page contents are dynamically created, i have no way to know when my div will be broken or not.

Is there any css or javascript i can use to tell that a specific div must not be broken between two pages?

I saw the css rule "page-break-before" that i could use surrounding my div but that will cause a page break even in cases that it could be avoided (increasing the total print pages unnecessarily).

Possible duplicate http://stackoverflow.com/questions/907680/css-printing-avoiding-cut-in-half-divs-between-pages — MikeSmithDev, Nov 23 '12 at 15:09

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

Your best bet is this (but has compatibility issues)

.noBreak { page-break-inside: avoid;  }

Current compatibility (source):

Chrome     Firefox (Gecko)    Internet Explorer    Opera     Safari (WebKit)
1.0        19.0 (19)          8.0                  7.0       1.3 (312)

Other SO Discussion: alternative to page-break-inside:avoid because of compatibility issues

W3Schools

edited May 23 '17 at 12:33

Community

1
1

answered Nov 23 '12 at 14:59

MikeSmithDev

15,731
4
58
89

score 0 · Answer 2 · answered Nov 23 '12 at 14:42

0

it is necesary to connect another css for print:

<link type="text/css" rel="stylesheet" media="print" href="PATH_TO_CSS" />

and write styles just for print.

answered Nov 23 '12 at 14:42

Graidenix

16
2

4

How does this answer his question? – MikeSmithDev Nov 23 '12 at 14:46

Print html div without breaking its contents between two pages

2 Answers2