时间戳

首页 > 解决方案 > CSS 列填充自动忽略打印的分页符

css - 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

更新：正如 Juan Marco 所指出的，这很可能是一个 Chrome 错误。如此处所述：https ://github.com/w3c/csswg-drafts/issues/4036 。我认为，任何对官方错误或状态的明确引用，或者更好的解决方法都可以算作一个答案。

标签： cssgoogle-chromecss-multicolumn-layout

解决方案

对于column-fillMDN 说：

请注意，由于规范中未解决的问题，跨浏览器的列填充存在一些互操作性问题和错误。

每当您计划使用实验性功能或不受支持的功能时，请检查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;
}

推荐阅读