CSS / HTML：避免将标题与段落分开

Question

我正在处理一个项目，该项目涉及将HTML页面打印到A4纸上。

目前我面临的问题是，在打印预览/生成的pdf中，某些段落的标题单独浮动且未连接＆＃39;到下一段。像这样：

这是一个明显的解决方案;将所有标题和以下内容包装在div中并将其设置为page-break-inside：避免或显示：inline-block。像这样：

这个解决方案效果很好，但有一个但是。 在某些情况下包装标题和段落会导致不需要的空白空格，其中段落和标题被强制到下一页，从而中断文本的浮动。像这样：

我一直在摆弄一些jquery解决方案，但我觉得这很快变得不稳定和肮脏。

有什么建议吗？

一切顺利！

现场链接：

http://template01.info/stack/default.html

http://template01.info/stack/inlineblock.html

http://template01.info/stack/pagebreakinside.html

Answer 1

在标题上使用此样式：

.header {
  page-break-after: avoid;
}