问题标签 [page-break-inside]

我正在尝试使用 page-break-inside CSS 指令，其类将附加到 div 标签或 table 标签（我认为这可能只适用于块元素，在这种情况下它必须是桌子）。

我已经尝试了所有应该准确描述如何做到这一点的教程，但没有任何效果。这是浏览器支持的问题还是有人真正得到了这个工作，CSS的确切位看起来像这样：

鉴于以下 HTML 文档，我需要将“表格标题”行与<table>在 IE8 中打印时保持在同一页面上。

尽管如此page-break-inside:avoid;，标题和表格之间仍然存在分页符。我对此的理解表明应该避免分页符，并将整个div页面推到第 2 页。

doctype 是 XHTML 1.0 Transitional，我已经<meta http-equiv="X-UA-Compatible" content="IE=8" />设置强制 IE8 进入应该支持这种语法的标准模式，并且我已经通过检查验证了渲染是在标准模式下完成的document.compatMode == "CSS1Compat"。XHTML 是有效的。

我在一个项目中，我被分配了修改报告页面以使其可打印的任务。该报告使用 PHP 在 div 中生成表格，但 div 在打印时有时会大于 1 页长度。所以，最终发生的事情是一旦页面长度用完，表格/div就会被破坏。最终的结果是一片混乱。

我已经用标签修改了 print.css：

所有的 div 看起来像：

这稍微清理了报告（即，每个部分都从一个新页面开始）。但这似乎浪费了相当多的纸张，并没有解决中表分页的问题。我的另一个想法是自动缩小 div 的内容以完全适合 1 页。我们的 div 都不是 > 2 页，所以如果这是可能的，我认为这将是一个很好的解决方案……但这可能吗？有没有办法让 css 调整字体大小以适应 div 长度？

我用谷歌搜索了缩放内容以适应 div，但每个人似乎都想要与我想要的相反（即 div 适合内容，而不是内容适合 div）。

有没有人可以提供任何帮助？整齐地打印 html 表格的一般示例也可以工作，因为我能够找到的所有结果都涉及非浏览器支持的 CSS（即，不起作用）：“page-break-inside：避免”。

先感谢您。

我目前正在打印一些东西。我有一个动态页面，其中包含可变数量的块级元素。有些可能是 1 行，有些可能是 100+ 行。

我知道 page-break-inside:avoid; 当它被实现时（Opera、Chrome 和 IE7+ 仅在严格的 html 模式下支持）假设防止块级元素环绕 2 页。由于跨浏览器不支持此 css 标签，我想知道是否有任何解决方法？

我尝试使用 jquery，后渲染，并测量每页的每个元素，将高度相加，当最后一个元素相加大于页面高度时，我添加一个 page-break-before:always 到该元素，但只有在我假设某个页面大小时才有效，这绝不是一个好的假设。

而且我不想只添加 page-break-before / after :always 到每个元素，因为在单个页面上有一个 1 衬里是没有意义的。

我有以下虚拟代码：

它渲染了一些

元素和页面预览看起来如下所示：

我需要为第一个和最后一个元素添加边框，如下所示：

是否可以使用 CSS 制作并在 webkit 中工作？

编辑：给所有建议以下CSS的人

或者

这对我不起作用，因为它适用于所有页面并且看起来像这样：

我需要在 chrome 中工作

我使用 rml 作为 openerp7 的报告语言。在那里我需要在文本之后放置一个分页符。

我的代码如下

请澄清我。谢谢你的时间。

我有一个长表数据，其中包含许多行和嵌套表。当我打印这些数据时，表格和嵌套表格的行只是在分页符处中断，这意味着表格和数据被分成页面，所以我在那里使用以下 CSS 属性：-

但这在我的情况下不起作用，您可以在此处查看现场演示：-- http://jsfiddle.net/npsingh/S8vr8/2/show/

请通过以下链接编辑代码：--
http://jsfiddle.net/npsingh/S8vr8/2/
---[打印页面只需按 [CTRL+P] 或右键单击并单击打印选项]-- -

我正在使用 Google Chrome 版本 29.0.1547.66 m

请让我知道问题究竟出在哪里。谢谢

我正在尝试以page-break-inside: avoid使用多行 flexbox 布局（带有flex-wrap: wrap）的形式工作。目标只是避免在打印时打断表格问题。

这适用于单行 flexbox 或没有 flexbox。查看http://jsfiddle.net/MartijnR/nSE3P/1/show/的打印预览 （注意没有应用 flexbox 类）

但是，当使用多行flexbox时，似乎忽略了page-break-inside: avoidcss规则。查看http://jsfiddle.net/MartijnR/nSE3P/2/show/的打印预览 （注意我在 section 元素中添加了 flexbox 类）

我在最新的 Chrome 和 IE11 中都尝试过，并且都表现出相同的行为，这让我认为这不是浏览器错误。（FF 还不支持多行 flexbox，所以它要到明年年初才能在那里工作）

有谁知道如何让flex-wrap: wrapflexbox 布局很好地发挥作用page-break-inside:avoid？

PS。我知道在示例代码中使用多行 flexbox 似乎没有意义，但实际上创建网格布局对我来说确实有意义。

我正在从另一个页面动态添加 HTML 并将其设置为打印样式。但是，page-break-inside: avoid;当应用于我的元素（其中任何一个）时，即使它出现在样式中，打印时似乎也没有被考虑在内。我在 Windows 上使用 Chrome 31

这是我的程序的简化版本的 jsFiddle（警告setInterval：它会在 3 秒后显示打印预览。要停止此操作，只需将底部的注释注释掉page-break-inside:avoid打印预览没有任何影响

我发现的通常的“修复”，添加position:relative到元素及其父级，在我的情况下不起作用。给它加前缀（正如几个人建议的那样）似乎也不起作用

我知道page-break-inside: avoid;在 Chrome 31 中可以使用动态放置的元素，因为我在伪版本中对其进行了测试（警告：这也会打开打印预览），但是在花费数小时删除代码、使用样式和研究主题之后（大多数帖子都非常过时）我似乎无法让我更复杂的版本以同样的方式工作

提前感谢您的任何见解！

我在使用 page-break-inside:avoid 打印 CSS 时遇到问题。

在四处寻找解决方案时，我已经阅读了为目标和父元素设置 float:none、display:block 和 position:relative 的好习惯，但我没有任何运气让它在 Safari 或 Chrome 中工作，据说不再有支持问题。

在这种情况下，我想避免图像跨越分页符。它们都包含在 div.scrollingSSImage 中

我所有的 CSS 都验证得很好。我还搞什么鬼？！

谢谢——迈克尔·费米亚