Las columnas CSS se rompen al imprimir

2 minutos de lectura
.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;
}

Así que funciona perfectamente en Safari, pero al imprimir, las 4 columnas se convierten en una sola columna que abarca varias páginas. ¿Algunas ideas?

  • Esto es muy frustrante. He estado trabajando en una solución durante algunas horas y parece que tendré que tomar una ruta completamente diferente. La implementación de WebKit (incluida la última compilación, que acabo de verificar, Chrome y wkhtmltopdf) tiene las columnas CSS3 desactivadas (consulte la respuesta de Peter). Firefox en realidad los representa correctamente, pero no tengo idea de cómo acceder a eso de manera eficiente mediante programación 🙁 Malos tiempos.

    – Cabaña8

    6 de octubre de 2013 a las 11:58

  • Error de cromo relacionado: code.google.com/p/chromium/issues/detail?id=99358

    – Damián

    3 de noviembre de 2014 a las 16:57

Parece que el desarrollador de columnas en Webkit (Dave Hyatt) deshabilitó las columnas al imprimir, porque no pudo implementar correctamente los saltos de página: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

Me sorprende que en más de 5 años no se haya encontrado ninguna solución…

  • Eso es muy interesante porque me encontré con un problema similar que tendré que terminar implementando como una solución personalizada. Es bastante molesto que aún no haya una solución.

    – Nick Felker

    12 de noviembre de 2013 a las 4:12

  • En la conversación, parece que los desarrolladores indican que está solucionado, pero sigo viendo el problema.

    – Joel

    08/03/2016 a las 21:42

  • este error se solucionó recientemente en chome – bugs.chromium.org/p/chromium/issues/detail?id=99358

    – Māris Kiseļovs

    30 de diciembre de 2016 a las 6:28

  • Esto está arreglado en Chrome, no en Safari.

    – Doekman

    16 de abril de 2018 a las 9:38

  • está arreglado en Safari, pero cuando traté de imprimir en iOS WKWebView, los errores vuelven a aparecer

    – Alan Donizete

    25 de mayo de 2020 a las 18:12

Vale la pena señalar que en Firefox 31.0 en OSX estos se imprimen correctamente con el siguiente estilo. Sin embargo, todavía está roto en WebKit (safari/chrome).

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

No funciona en Chrome, Firefox. solo tienes una solución temporal. use IE para impresión de varias columnas

  • Funciona a las mil maravillas en firefox.

    –Alejandro Salamanca Mazuelo

    7 mayo 2016 a las 22:39

La única forma de imprimir en columnas es imprimir con FireFox o IE… y usar las versiones prefijadas sin navegador para que FF e IE puedan leer las columnas CSS

la impresión y la página web son 2 cosas diferentes. Así que intente usar diff css para imprimir páginas e intente ver

Propiedades css de salto de página. Sera util


  • ¡Sería muy bueno si tuvieras una publicación y un ejemplo!

    – mandza

    18 de agosto de 2014 a las 12:48

  • ¡Sería muy bueno si tuvieras una publicación y un ejemplo!

    – mandza

    18 de agosto de 2014 a las 12:48

¿Ha sido útil esta solución?