【发布时间】：2020-02-03 16:13:05
【问题描述】：
我正在设计一个我希望可打印的网页。布局看起来可以接受，除了一点：标题有时会（垂直）在不同页面之间拆分：
我通过尝试打印https://www.craftinginterpreters.com/evaluating-expressions.html 获得了这个例子（顺便说一句，这是一个很棒的阅读）。
是什么导致了这个丑陋的工件？我可以在 CSS、HTML 或其他方面做些什么来防止这种分裂吗？
【问题讨论】：
【发布时间】：2020-02-03 16:13:05
【问题描述】：
试试这个：
@media print
{
div{
page-break-inside: avoid;
}
}
【讨论】：
-
感谢您的回答！元素内部没有实际的分页符，因此这不适用。
在标题的 CSS 中，有以下行：
font: 600 30px/24px "Crimson", Georgia, serif;
30px/24px表示字体大小为30px，而line height只有24px。
标题是根据行高拆分的，通常比字体大小大 20% 左右。在这种情况下，它会更小，这可能会导致页眉超过行高并在页面之间拆分。
只需从 CSS 作品中删除行高：
font: 600 30px/24px "Crimson", Georgia, serif;
在这种情况下，使用默认值。也可以手动增加字体高度。
【讨论】：