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 : #ee

Solution 1:

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

Solution 2:

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;
}

Solution 3:

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

Solution 4:

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

Solution 5:

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

---