.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?
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.
Syntax: page-break-inside: auto; avoid: It avoids a page break inside the element.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With