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 Safar开发者_JAVA技巧i, but when printing, the 4 columns turn into a single column spanning multiple pages. Any ideas?

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...

It's worth noting that in Firefox 31.0 on OSX these do print correctly with the below style. However it's still broken in WebKit (safari/chrome).

.column_wrapper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

It's not working in chrome, firefox. you have only one temporary solution. use IE for multi column print

The only way to print in columns is to print with FireFox or IE... and use the un-browser prefixed versions so that FF nad IE can read the columns CSS

the print and web page are 2 different things. So try to use diff css for print pages and try to see

page-break css properties. it will come in handy