Как избежать перерыва страницы сразу после заголовка

У меня есть документ HTML 4.01/CSS 2.1, который включает заголовок H3, за которым следует короткий блок абзаца (одна строка), а затем неупорядоченный список с несколькими элементами:

<h3>Heading!</h3>

<p>Some things:</p>

<ul>
  <li>Thing one</li>
  <li>Thing B</li>
  <li>Thing 4</li>
</ul>

Моя проблема в том, что когда я печатаю документ (или представляю его как PDF с помощью wkhtmltopdf), иногда разрыв страницы происходит сразу после заголовка перед абзацем, который выглядит довольно глупым.

Есть ли способ предусмотреть, что разрывы страниц следует избегать сразу после заголовка? (Я не прочь в решениях HTML5/CSS3, если это значительно упростит ситуацию.)

Примечание: следующие рекомендации, я попытался использовать свойство CSS page-break-after: avoid. Это действительно не работает в WebKit или Mozilla, однако.

ОТВЕТЫ

Ответ 1

Поскольку свойство CSS page-break-after: avoid не работает ни в каком WebKit или Mozilla, используйте page-break-inside: avoid над заголовком и допустимым количеством текста:

CSS

<style type="text/css">
    .nobreak {
        page-break-inside: avoid;
    }
</style>

HTML

<div class="nobreak">
    <h3>Heading!</h3>

    <p>Some things:</p>

</div>

    <ul>
      <li>Thing one</li>
      <li>Thing B</li>
      <li>Thing 4</li>
    </ul>

Ответ 2

Это очень хакерское решение, но оно работает для меня:

h1 {
    page-break-inside: avoid;
}
h1::after {
    content: "";
    height: 100px;
    margin-bottom: -100px;
}

По сути, я создаю невидимый элемент, который увеличивает размер <h1> не затрагивая содержимое после него. Когда применяется page-break-inside: avoid и весь <h1> (включая хакерский элемент не помещается на странице), браузер вынужден переносить <h1> на следующую страницу.