html 页面打印 分页符,html - 浮动的HTML / CSS打印分页符不起作用（例如：引导程序） - 堆栈内存溢出...

首先，分页符不能在绝对定位的元素中使用，因此请确保分页符不在一个元素中。

现在，由于浮动导致分页符被忽略，因此我们需要清除浮动。

问题很clear: both; 如果带有page-break-after: always;的元素page-break-after: always;不起作用page-break-after: always; 是一个浮点数(例如：bootstrap中的.col-xs-12 )。

诀窍是要在要向其添加分页符的div之后添加带有clear和page-break符的2个新div：

.page-break-clear {

clear: both;

}

.page-break {

page-break-after: always; /* depreciating, use break-after */

break-after: page;

height: 0px;

display: block!important;

}

把它放在一起：

floating div

Add page break after this element when printing

This should be printed on next page

.page-break-clear {

clear: both;

}

.page-break {

page-break-after: always; /* depreciating, use break-after */

break-after: page;

height: 0px;

display: block!important;

}

作为旁注：我建议删除问题中提供的.break-after类的page-break-after css，以防万一删除浮点数并且它确实有效时，分页符增加一倍。

另外，如果您使用的是jquery并且不想手动添加这两个分页.break-after div，则可以使您的生活更加轻松，只需运行以下代码即可自动将它们添加到所有带有.break-after类的元素.break-after ：

$('.break-after').after('