打印时将页眉保留在一页上

Question

我正在设计一个网页，我想是可打印的。布局看起来可以接受，除了一点:页眉有时会在不同的页面之间(垂直地)拆分：

​

​

我通过尝试打印https://www.craftinginterpreters.com/evaluating-expressions.html获得了这个示例(顺便说一句，这是一个很棒的读物)。

是什么造成了这个丑陋的神器？我可以在CSS、HTML或其他方面做些什么来防止这种拆分吗？

Answer 1

在标题的CSS中，有以下行：

font: 600 30px/24px "Crimson", Georgia, serif;

30px/24px表示字体大小为30px，而line height仅为24px。

标题是根据行高拆分的，行高通常比字体大20%左右。在这种情况下，它较小，这可能会导致页眉超过行高并在页面之间拆分。

只需从CSS中删除行高即可：

font: 600 30px/24px "Crimson", Georgia, serif;

在这种情况下，使用默认值。也可以手动增加字体高度。

Answer 2

试试这个：

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

在这里找到它：https://stackoverflow.com/a/907719/1195615