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

Свойство 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. Я думаю, что любая четкая ссылка на официальную ошибку или статус, или, что еще лучше, на обходной путь, будет считаться ответом.


google-chrome css css-multicolumn-layout
person svenema    schedule 03.02.2020    source источник
comment
У вас есть минимальный воспроизводимый пример, который вы можете добавить к вопросу, чтобы продемонстрировать это?   -  person TylerH    schedule 04.02.2020
comment
@TylerH: добавлено.   -  person svenema    schedule 04.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

Autoprefixer сгенерировал это:

.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;
}
person Juan Marco    schedule 04.02.2020
comment
это хорошо, ничего об этом не знал ... однако, к сожалению, это не исправляет Chrome. Обновил мой пример сгенерированными автоматическими префиксами. - person svenema; 04.02.2020
comment
Рад, что было познавательно. Когда я исследовал column-fill, я обнаружил открытую проблему, касающуюся того, как он ведет себя в разбивке на страницы и непрерывном контексте. . Возможно, вам придется найти альтернативу, пока она не будет решена. - person Juan Marco; 04.02.2020
comment
Итак, похоже, это ошибка Chrome ... очень плохо. - person svenema; 05.02.2020