解决Chrome中使用CSS的Page-Break属性进行打印的解决方法

Question

我的任务：用自定义CSS打印网页的一部分，然后将页面从特定的Div中分解，并避免从特定Div中断页面。

我的方法： ->我使用JavaScript从网页中获取值，并创建自己的DIV，并动态地使用所需值，并将其附加到已存在的隐藏DIV上，该页面已存在，该页面上有CSS可以知道其打印部分的ID。 ->一切都很好，到目前为止，我已经得到我想要的印刷品，但是一个要求是它不应在特定的Divs内打破页面（这是主要问题）从特定的div中必须分开（这是完成的）。

->我在CSS中使用的属性是

/* Page break properties */
/* breaks page after first workout  */
#WorkoutAfterOne{
    display : block;
    page-break-before: always !important;
    page-break-inside: avoid !important;
}
/* Do not break page in this div */
#noPageBreak{
    display : block;
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
}

我已经搜索了该解决方案，但是我无法得到它。首先，我发现不使用诸如float或Display Block等的属性。而为了我的任务，或者我可以说很难避免。所以我正在寻找解决方法。

Answer 1

我通过使用此CSS属性找到了对解决方案的答案。

-webkit-region-break-inside: avoid;

希望如果不尝试添加

，它将有所帮助

display : block;
page-break-inside: avoid !important;

谢谢..！