Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS columns breaking when printing

.class {    -webkit-column-count: 4;     -webkit-column-gap: 0.25in;     -webkit-column-rule-width : 1px;     -webkit-column-rule-style : solid;     -webkit-column-rule-color : #eee; } 

So it works perfectly in Safari, but when printing, the 4 columns turn into a single column spanning multiple pages. Any ideas?

like image 850
putorti Avatar asked Apr 21 '11 02:04

putorti


People also ask

What are the CSS properties that are used to manage column breaks?

The break-inside property specifies whether or not a page break, column break, or region break should occur inside the specified element. The break-inside property extends then CSS2 page-break-inside property. With break-inside , you can tell the browser to avoid breaks inside images, code snippets, tables, and listst.

How do I prevent a page break in a div?

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


1 Answers

It seems like the developer of columns in Webkit (Dave Hyatt) disabled columns when printing, because he couldn't implement page breaking properly: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

I'm surprised that in more than 5 years, no solution has been found...

like image 148
Peter Avatar answered Sep 21 '22 00:09

Peter