打印时将 header 保持在一页上

Question

我正在设计一个 web 页面，我希望它是可打印的。 布局看起来可以接受，除了一点：标题有时会在不同页面之间（垂直）拆分：

我通过尝试打印https://www.craftinginterpreters.com/evaluating-expressions.html获得了这个例子（顺便说一句，这是一本很棒的书）。

是什么导致了这个丑陋的神器？ 在 CSS、HTML 或其他方面我能做些什么来防止这种分裂？

Answer 1

尝试这个：

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

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

Answer 2

在 header 的 CSS 中，有以下行：

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

30px/24px 表示字体大小为 30px，而行高仅为 24px。

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

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

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

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