CSS columns breaking when printing

Question

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

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

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

Answer 3

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

Answer 4

在列中打印的唯一方法是使用FireFox或IE打印...并使用非浏览器前缀版本，以便FF nad IE可以读取列CSS

Answer 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

---