章节标题

Question

所以我有一个可以生成可打印文档的rails应用程序。本文档包含几个部分，每个部分都有标题，带有字幕的子部分和内容区域。我想确保这些部分不会分页：

一些内容......

章节标题

Section Subtitle

部分内容lorem ipsum dolor sit amet，consectetur adipiscing elit。 Maecenas ut laoreet lacus。 Nulla consectetur non ligula et dapibus。 Mauris tincidunt，mollis maximus的libero，dui risus ultricies diam，vehicula semper libero

---------分页----------

非犯罪者。 Sed acliclicin lacus，nec feugiat ipsum。 Nulla congue arcu ut purus cursus，eget feugiat urna tincidunt。 Mauris arcu tellus ...

换句话说，我想确保，如果我不能在与节标题和副标题相同的页面上至少有3行内容，整个部分将被强制进入下一页。

目前的CSS规范包括＆＃34; page-break-after＆＃34;和＆＃34;孤儿＆＃34;控制。从理论上讲，我应该可以应用＆＃34;分页后：避免＆＃34;标题和副标题的样式，以及＆＃34;孤儿：3＆＃34;风格的内容。但是，显然NO browsers support this spec（我在Mac上的FF＆amp; Chrome中已经证实了这一点）。

有没有办法以编程方式实现这一目的？我可以使用JS / jquery来计算/设置元素的位置，但是这看起来非常棘手，并且在涉及变量的情况下可能无法工作。

或者，是否有任何方法可以强制浏览器直观地呈现页面，就像打印出来一样？

我还应该添加我们使用PDFkit（wkhtmltopdf）来生成PDF作为最终产品，所以如果有任何方式可以使用这些工具来实现相同目的，或另一个宝石或工具（除了Prawn）来实现这一目标，这也很棒。

Answer 1

看起来page-break-*规则通常支持 small 例外，不支持您想要的page-break-after和page-break-before。

但是，大多数浏览器似乎都支持page-break-inside CSS规则。因此，如果您考虑一下，我们可以将其用作解决方法。如果您使用此属性将标题和下一个3段包装在一个div中，那么您就可以获得所需的内容。

＆＃13;

@media print {
  .no-print-break {
    page-break-inside: avoid;
  }
}

＆＃13;

<p>some content...</p>

<div class="no-print-break">
  <h1>Section Title</h1>
  <h2>Section Subtitle</h2>
  <p>Section content lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut laoreet lacus. Nulla consectetur non ligula et dapibus. Mauris tincidunt, libero at mollis maximus, dui risus ultricies diam, vehicula semper libero.</p>
</div>
<p>Content that can move to another page</p>

＆＃13;

在浏览器窗口中预览@page呈现

章节标题

Section Subtitle

1 个答案: