javascript - HTML页面打印

Question

我有一个动态页面，显示成员信息和数据库中的照片。我的问题是，当用户打印页面时，它有时会切断成员信息并在下一页打印其余信息。有没有办法强制页面大小或不允许信息分布在两页上的东西？也许是 Javascript 或 CSS？

Answer 1

如果您将成员(member)信息和图片放在一个 div 或其他 block 中，您可以使用类似于下面的 page-break-inside CSS 属性。

HTML

<div class="member-info">
    ....
</div>

CSS

.member-info {
    page-break-inside: avoid;
}

MDN documentation for page-break-inside