Question

我有一个报告，我想用CSS打印，第一页是横向，第二页是纵向。当我这样做时，第一页很好，但第二页看起来像一个裁剪成纵向框架的风景页面。也就是说，当文本居中时，它将中点设置为5.5英寸（在8.5x11信纸上），页面将打破仅8.5英寸高：

Screenshot of Print Preview

我可以通过给第二页div宽度为75％来作弊。这会使文本居中，并且所有格式都正确，但页面内容仍然在8.5in处切断。与高度混淆不会做任何事情，因为这将继续包裹到新页面。

我现在只需要在谷歌浏览器中使用它，因为这是特殊目的而非公开使用。

这是我的测试代码：

<style type="text/css">

@media print {
body { margin: 0; text-align: center; }

@page {
    margin: 0.1in 0.5in 0.1in 0.5in;
    size: letter portrait;
}

@page :first {
    margin: 0.1in 0.5in 0.1in 0.5in;
    size: letter landscape;
}

#firstpage { page-break-after: always; }

#secondpage { width: 75%; }

}
</style>

</head>
<body>

<div id="firstpage">
<p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p>
</div>
<div id="secondpage">
<p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p>
</div>

Answer 1

在您的示例中，这在Chrome 78中对我有效：

@media print {
    :root {
        width: 75vw;
    }
    #firstpage {
        width: 100vw;
    }
}

在更复杂的页面上似乎也可以正常工作-使横向页面的内容的宽度为100vw，其他所有内容的宽度为75vw。

打印CSS中混合的纵向和横向页面

1 个答案: