避免在页面末尾单独留下副标题答案

【问题标题】：Avoid the subtitle left alone at the end of a page避免在页面末尾单独留下副标题
【发布时间】：2014-10-26 22:36:17
【问题描述】：

通过增加或减少 epub 中的字体样式，有时字幕会单独留在页面末尾。

我怎样才能避免这种情况？

我希望这个副标题不要单独放在页面末尾，并且下一段至少有 2 行。否则它应该从一个新页面开始。

我尝试使用包含字幕和第一段的 div，但现在我在字幕前面的页面上得到一个很大的空白。

【问题讨论】：

标签： css epub

【解决方案1】：

您可以使用诸如 page-break-after 和 page-break-before 之类的 CSS 属性来解决此问题... 例如在标题类上我添加“page-break-after：避免；”使其与以下子标题保持一致（我还在章节标题上添加了相同的内容，以免与章节第一段分开）

【讨论】：

【解决方案2】：

使用 page-break-after、page-break-before 和 page-break-inside 的问题在于它们是块元素，这意味着您必须在 span 或 div 中使用它们。如果您只是将它们应用于普通样式，它们将被忽略（即使您将 !important 添加到属性）。

这是我们的工作：

CSS：

div.headbreaks {
    page-break-inside: avoid;
}

HTML：

<div class="headbreaks">
<h1>Some Awesome Heading Goes Here</h1>

<p>
Bacon ipsum dolor amet filet mignon tempor doner rump bacon, 
ex tenderloin salami consequat jerky pig meatball frankfurter.
Porchetta beef dolore aliquip pig, bacon excepteur. Cow dolore
shankle prosciutto fatback. Elit ut frankfurter aliqua pork loin
aliquip, shank strip steak cow incididunt fugiat in irure jerky
turducken.
</p>
</div>

这可确保该 div 中包含的项目将保持在一起。如果需要分页符，读者应该将这些项目强制到下一页的顶部。

HTH

【讨论】：