打印时将 header 保持在一页上

Question

I am designing a web page which I would like to be printable. The layout looks acceptable, except for one point: Headers sometimes get split (vertically) between different pages:

I obtained this example by trying to print https://www.craftinginterpreters.com/evaluating-expressions.html (which is a terrific read, by the way).

What causes this ugly artifact? Is there anything I can do in CSS, HTML, or otherwise to prevent this kind of splitting?

Answer 1

Try this:

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

Found it here: https://stackoverflow.com/a/907719/1195615

Answer 2

In the CSS for the header, there is the following line:

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

The 30px/24px means that the font size is 30px, while the line height is only 24px.

The header is split based on the line-height, which is usually about 20% bigger than the font size. In this case, it is smaller, which can cause the header to exceed the line height and split between pages.

Simply deleting the line height from the CSS works:

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

In this case, the default is used. It is also possible to increase the font height manually.