CSS-столбцы ломаются при печати

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

Таким образом, он отлично работает в Safari, но при печати 4 столбца превращаются в один столбец, охватывающий несколько страниц. Есть идеи?

Answer 1

Похоже, что разработчик столбцов в Webkit (Dave Hyatt) отключил столбцы при печати, потому что он не смог правильно реализовать разбиение страницы: https://www.webkit.org/blog/88/css3-multi-column-support/

Я удивлен, что за более чем 5 лет не было найдено никакого решения...

Answer 2

Стоит отметить, что в Firefox 31.0 на OSX они печатаются правильно с использованием приведенного ниже стиля. Однако он все еще не работает в WebKit (Safari/ Chrome).

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

Answer 3

Это не работает в Chrome, Firefox. у вас есть только одно временное решение. используйте IE для многостолбцовой печати

Answer 4

Единственный способ печати в столбцах - это печать с использованием FireFox или IE... и использование версий без префикса браузера, чтобы FF и IE могли читать столбцы CSS

Answer 5

Печать и веб-страница - это две разные вещи. Поэтому попробуйте использовать diff css для печати страниц и попытайтесь увидеть

свойства css для разрыва страницы. это пригодится

---