CSS заполнение столбцов автоматически игнорирует напечатанные разрывы страниц - PullRequest
Новая
       9

CSS заполнение столбцов автоматически игнорирует напечатанные разрывы страниц

1 голос
/ 04 февраля 2020

Свойство column-fill: auto работает, сначала заполняя один полный столбец, а затем переходя к следующему. 

.two-column {
  column-count: 2;
  column-fill: auto;
}

Chrome делает это только правильно на экране, но не при печати и при обработке с разрывами страницы: 

A C
B D
---- page break
E G
F H
---- page break
I J  <-- two columns

Однако в оставшейся части списка, которая разбивается на последнюю страницу, макет возвращается к «сбалансированному» стилю. По крайней мере, Chrome делает, FireFox, отображает это правильно: 

A C
B D
---- page break
E G
F H
---- page break
I
J

Это (известная) ошибка Chrome? Есть ли обходной путь для этого?

Пример: https://codepen.io/Stu42/pen/PoqYYWo

Обновление : Как отметил Хуан Марко, это, вероятно, Chrome ошибка. Как обсуждено здесь: https://github.com/w3c/csswg-drafts/issues/4036. Я думаю, что любая четкая ссылка на официальный баг или статус, или, лучше, обходной путь будет считаться ответом.

1 Ответ

0 голосов
/ 04 февраля 2020

Для column-fill MDN говорит:

Обратите внимание, что существуют некоторые проблемы взаимодействия и ошибки с заполнением столбцов в разных браузерах из-за нерешенных проблем в спецификации.

Всякий раз, когда вы планируете использовать экспериментальную или плохо поддерживаемую функцию, проверьте caniuse для получения информации. Затем используйте Autoprefixer , чтобы получить необходимые префиксы вендора (если есть).

Например, для правила стиля: 

.two-column {
    column-count: 2;
    column-gap: 1cm;
    column-fill: auto;
    background-color: #faa;
}

Автоопределитель сгенерировал это: 

.two-column {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 1cm;
       -moz-column-gap: 1cm;
            column-gap: 1cm;
    -webkit-column-fill: auto;
       -moz-column-fill: auto;
            column-fill: auto;
    background-color: #faa;
}
...