问题标签 [page-break-inside]

我有这个CSS代码：

和html：

Chrome v80（一切都很好）：

火狐 v74：

这些技巧都行不通。在firefox doc中，它说它应该可以工作。但事实并非如此。我究竟做错了什么？条纹密码笔

看到这个类：

我已经注释掉了两种样式。将它们注释掉会导致内容正确分页。没有“关税单”在页面上分开：

现在，如果我引入floatandposition样式并再次尝试分页逻辑失败。如果我尝试打印横向，那么我会并排得到单张，但它们仍然会在分页符处分开。此示例包含更多内容，并且我已经屏蔽了名称：

那么我怎样才能用这些单据填满页面并防止分页符分开呢？目前，我能做到的唯一方法是注释掉这些样式并限制为一列值班单。

CSS：

HTML：

小提琴：

https://jsfiddle.net/e3kradLh/

我正在 Angular 中创建一个页面，该页面打印存储在变量中的一些数据。

我遵循了本指南：https ://medium.com/@Idan_Co/angular-print-service-290651c721f9

我设置的内容作为一个大的 HTML 字符串从 API 接收，我将其设置为 INNER HTML 到一个 div 中。

我遇到的问题是我的内容不会自动打破页面，即使使用属性：

正如你在这里看到的：

我想在每一页上都有一个页眉、页脚和从上一页“破坏”的内容。似乎内容被隐藏了，它只显示第一页。

这是我的布局页面：

这是我的内容页面

有人知道我如何强制页面中断吗？

谢谢 ！

我们正在使用 wkhtmltopdf 进行 html 到 pdf 的转换。我们正在使用page-break-inside，当我使用window.print（）检查它时它正在工作，但是当html转换为pdf时，应该在里面分页的整行在下一页上。为什么？

这就是它的样子

这就是它的样子

这个答案有助于避免在表格的单行内出现分页符，但是我正在寻找一种方法来防止在两个不同的行之间发生分页符。让我解释一下我的情况（为格式化道歉）：

标题：| Col1 | Col2 | Col3 | Col4 |

第 1 行：| VAL1 | val2 | VAL3 | val4 |

第 2 行：| 与 1,2,3,4 相关的值 |

第 3 行：| VAL5 | VAL6 | VAL7 | VAL8 |

第 4 行：| 与 5,6,7,8 相关的值 |

我有一个表，其中每两行相互关联，不应在单独的页面上显示。每对中的第二行有一个值，应该能够跨越该行的所有列。

我尝试了以下使用page-break-inside: avoid：

1. 将两行放在<div>标签内
2. 让 Col4 跨越两行（Col4 内容只是移动到下一页）
3. 将两行都放入表格中（失去与标题的对齐）

假设它是一个示例代码

我想打印这一部分，第一段在第一页，第二段在下一页。

在 .ts 文件中

在CSS中

但这不会在打印时破坏页面。所有数据都打印在一页中，如果内容大于一页，它仍然打印一页的数据。

我试过了

但什么也没发生。

如果有人帮助我了解如何在 ionic.js 中使用分页符属性。我会非常感谢。

HTML

page-break-inside：避免；不管用

结果

我想防止这种中间分页符

我正在使用 NReco pdf 生成器，并尝试page-break-inside: avoid !important;在 td 内的 div 上使用该属性，如下所示：（我在这里使用了样式标签，但它是在应用程序中使用 css 完成的）

由于某种原因，它每次都会被忽略。

除了突出显示的文本之外，红色圆圈内的所有内容都在 div 内。突出显示的文本来自页眉。我需要停止对内容的分页或将其移动到页眉下方。

我有一段代码，我想用 bootstrap 4 嵌套卡片制作好打印。我正在尝试让分页符工作，但我已经接近投降点了。我尝试在多个地方搜索并遵循多个提示，但没有任何工作像我试图让它工作一样。

我有多张卡片，里面有其他动态数字卡片，在@media print 我想避免内部卡片上的分页符，如果需要，添加一个分页符（我猜page-break-inner: Avoid已经像这个）。现在它只是忽略了我，根本没有分页符。

我已经隔离了代码，所以我可以分享片段。这是默认呈现的页面：https ://sandbox.federicofallico.it/default.php 这是生成页面的 PHP 源代码：https ://sandbox.federicofallico.it/default.txt

请注意我已经有一个 custom.css ( https://sandbox.federicofallico.it/custom.css )

另请注意，我无法更改 body/page-content/content-wrapper/content div

现在我做了很多测试，似乎只有两件事有效（坏），

测试 1：https ://sandbox.federicofallico.it/test1.php 源（https://sandbox.federicofallico.it/test1.txt）

添加这个

在每次外部卡片关闭工作之前，之前添加了分页符，但显然当到达 page-bottom 时内部卡片正在被剪切。

测试 2：https ://sandbox.federicofallico.it/test2.php 源代码（https://sandbox.federicofallico.it/test2.txt）

在内部卡（custom.css）上添加一个避免分页的类似乎可以工作，但我在一些内部卡上有一些奇怪的行为（内容消失，就像溢出：隐藏一样）。

我究竟做错了什么？在此先感谢所有愿意帮助我的人，并为英语不好感到抱歉！

我有一个使用 wkhtmltopdf 生成的 pdf 报告。其中一部分是带有 HTML 注释的表格，可以长达 3 页。我已经有下面的 CSS 以避免任何表格行或表格单元格内部有分页符，这适用于较小的行。但是，对于具有大注释的行，单元格跨越多个页面并溢出到下一页的表头中。

如何使溢出的文本位于单元格内，而不是与下一页的标题重叠？