如何用CSS使打印页面中的DIV内容不被拆分？

你的问题出在：用overflow: auto能在网页端阻止.grade元素跨列拆分，但打印时这个属性的表现不稳定，且没有针对打印场景做专门的样式适配。直接用多列布局的专用属性就能解决。

具体修改方案 #

1. 替换原有的overflow: auto，给.grade添加break-inside: avoid——这是CSS多列布局里专门用来强制元素不被拆分到不同列的属性，比overflow更精准。
2. 新增打印媒体查询，确保打印时列布局和不拆分的规则生效，同时避免固定高度导致内容截断。

完整CSS代码 #

.grade-table{
    margin-top: 20px;
    column-count: 2;
    column-fill: auto;
    height: 400px;
}
.grade-table .grade{
    break-inside: avoid; /* 强制元素完整留在同一列 */
}

/* 打印样式适配 */
@media print {
    .grade-table{
        column-count: 2;
        column-fill: auto;
        height: auto; /* 打印时取消固定高度，自适应内容 */
    }
    .grade-table .grade{
        break-inside: avoid !important; /* 确保打印时不拆分 */
        overflow: visible; /* 取消滚动，显示全部内容 */
    }
}

关键说明 #

• break-inside: avoid是专门针对多列、分页场景的属性，不管是网页还是打印，都能稳定阻止元素被拆分。
• 打印时把.grade-table的height设为auto，是因为固定400px高度在打印时可能导致第二列的内容被截断，自适应高度能让所有内容完整输出。
• 打印时强制overflow: visible，避免原有的overflow:auto在打印时生成滚动条，导致部分内容看不到。

内容的提问来源于stack exchange，提问作者Hamzapab