Too bad I didn’t notice last month that this thread had been revived. Ah well, better late than never I guess.
Anyway, for those who are still interested in simulating the behavior of “page-break-inside: avoid;” in Firefox, there are actually several ways to do it:
The easiest method is to put the content inside a div or table with the display property set to “inline-block” or “inline-table”, respectively. Technically, this should work in any browser, but I’ve only verified it in recent versions of Firefox and Internet Explorer, and considering how little effort browser devs have traditionally put into supporting paged media, I wouldn’t be surprised if it didn’t work elsewhere (including in older versions of FF and IE). If anyone has time to test it in the other browsers, though, I’d be interested in knowing the results.
Just in case anyone’s too lazy to throw together a test page, here’s markbrown4’s code with the <pre> section placed inside an inline-block div to make it unbreakable:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
pre {
padding: 7px;
border: 1px solid #ccc;
display: block;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.3);
box-shadow: 0 3px 5px rgba(0,0,0,.3);
}
@media print {
pre { page-break-inside: avoid }
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<tr>
<td>
<div style="display: inline-block;width: 100%;">
<pre>
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
</pre>
</div>
</body>
</html>
When you check the print preview, you’ll notice that the <pre> element gets bumped in its entirety to the second page rather than getting split across two pages. This is the same behavior you would get from “page-break-inside: avoid”, if it was supported.
Another way of avoiding page breaks that actually works in older versions of IE and FF (though how old I can’t say) is the method I already demonstrated two replies ago. Here it is again, but this time applied to markbrown4’s code (look for the html comment above the four elements that I added):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
pre {
padding: 7px;
border: 1px solid #ccc;
display: block;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.3);
box-shadow: 0 3px 5px rgba(0,0,0,.3);
}
@media print {
pre { page-break-inside: avoid }
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<tr>
<td>
<!--THE NEXT FOUR TAGS ARE THE KEY TO AVOIDING PAGE BREAKS-->
<div style="display: inline-block; width: 100%; page-break-inside: avoid;overflow: hidden;">
<table style="width: 100%; overflow: hidden;">
<thead style="display: table-header-group; overflow: hidden;">
<tr>
<td style="padding: 0;">
<pre>
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
</pre>
</td>
</tr>
</thead>
</table>
</div>
</body>
</html>
I stumbled upon this technique a long time ago through trial and error, and I can’t remember if all of those tags and css properties are necessary to make it work. The most important factor, iirc, was placing everything inside table header (that is, a <thead> element with the css property “display: table-header-group”). That seemed to be the only element that the browsers would not allow to be split by a page break.
There is one other way of avoiding page breaks in Firefox that I’ve come across: setting the overflow property to “hidden”. I’m not sure why this would make an element unbreakable, but it seems to work just as well as any other method I’ve discovered. I wouldn’t be surprised if it stopped working at some point, though, as it seems like a bug to me.
That’s all I have for now. Best of luck to anyone out there who hasn’t given up yet!