在 chrome 中使用 css 分页符属性进行打印的解决方法？答案

【问题标题】：Workaround to use css page-break properties in chrome for printing?在 chrome 中使用 css 分页符属性进行打印的解决方法？
【发布时间】：2016-06-21 17:05:19
【问题描述】：

我的任务：使用自定义 css 打印网页的一部分，并从特定 div 中分页并避免从特定 div 中分页。

我的方法： -> 我正在使用 javascript 从网页获取值，并动态创建我自己的具有所需值的 div，并将它们附加到页面上已经存在的隐藏 div，该页面上有 id 以便 css 知道其打印部分。 -> 一切都很好，直到现在我得到了我想要打印的东西，但是 一个要求是它不应该破坏特定 div 中的页面（这是主要问题） 并且它必须与特定的 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;

}

我已经搜索了解决方案，但我无法得到它。首先，我发现不要使用浮动或显示块等属性。但对于我的任务，它是必需的，或者我可以说很难避免。所以我正在寻找解决方法。

【问题讨论】：

作为注释...这两项... page-break-before：避免！重要；和 page-break-after: 避免 !important;绝对与不允许内部休息无关。他们的意思是不要在它之前或之后做一个休息，本质上把它粘在它之前和之后的东西上。如果这些事情也很大，你预计会发生什么？

标签： javascript html css printing

【解决方案1】：

我通过使用这个 css 属性找到了我的解决方案的答案..

-webkit-region-break-inside: avoid;

如果不尝试添加希望它会有所帮助

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

谢谢..！

【讨论】：