Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to avoid page breaking when printing long lists

Tags:

html

css

printing

I'm doing some styling for a printable brochure on my client's site, which could potentially contain long unordered lists of information.

My issue is when printing in Firefox the entire <UL> will break on to a new page instead of it's children <li>'s splitting, which means it doesn't flow with other content on the page.

I've found the CSS property page-break-inside is only supported in Opera and IE8, does anyone know of an alternative to this property or another method that I can use to prevent the entire list breaking on to a new page.

Cheers!

UPDATE [23.11.2011]: I was able to use a work around on my issue, as the printed document is generated in response to a user's selection so this page is only ever going to be print I (very reluctantly) pushed semantics aside and removed the UL and replaced LI's with DIVs, which break correctly. The question still stands though, for anyone with a similar issue but using the same HTML for print & screen.

I will reproduce the problem I was having and post the necessary HTML & CSS as soon as I can.

like image 874
Wayne Austin Avatar asked Oct 24 '11 11:10

Wayne Austin


People also ask

How do you prevent page breaks?

On the Format menu, select Paragraph, and then select the Line and Page Breaks tab. Clear the Keep lines together, Keep with next, and Page break before check boxes.

How do I prevent a page-break in a div?

Syntax: page-break-inside: auto; avoid: It avoids a page break inside the element.

What is page-break printing?

A page break is a marker in an electronic document that tells the document interpreter that the content which follows is part of a new page. A page break causes a form feed to be sent to the printer during spooling of the document to the printer. Thus it is one of the elements that contributes to pagination.


1 Answers

Consider programmatically removing the UL tags for the print version. You should be able to get the LI elements to display the same with some styling.

JavaScript or even jQuery can handle this easily enough but I bet you could take care of this server side instead.

I know it's not technically valid HTML but sometimes you have to bend the rules when HTML/CSS doesn't offer you flexibility.

like image 151
Matthew Avatar answered Oct 02 '22 20:10

Matthew