Как избежать перерыва страницы сразу после заголовка
У меня есть документ 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>
на следующую страницу.