wordpress - CSS @page 不适用

Question

我在需要打印的页面上有这些巨大的文本块，我想添加顶部和底部边距，这样文本就不会太靠近打印页面的边缘。由于这些文本块不能用标签分解，因为它们是由 rss 提要爬虫聚合的，所以我尝试在 css 中使用@page，但到目前为止没有成功。我正在使用 Chrome 和打印机预览。我正在使用 wordpress，如果重要的话。

这是它在 PDF 中的样子的图像。 打印文本块

我尝试将其放入@media screenor @media print，添加!important并且我已经在网上搜索了一个小时...

我在我的 CSS 文件中添加了这个 CSS（并尝试了其他变体），但它不适用。所有其他@media 打印样式都可以正常工作。

@page { 
  margin-top: 2cm;
  }

任何指针都将不胜感激，因此我可以在打印页面的顶部和底部添加边距。

标签： wordpresscssmedia-queries

Answer 1

@media print正如您已经写过的，通常使用 来处理打印的元素。但除此之外，您还需要该媒体查询中的选择器。因此，如果这些文本块具有例如 class .my_class，则 CSS 将是

@media print {
  .my_class {
    margin-top: 2cm;
  }
}

如果文本块没有任何类，请考虑在 HTML 或生成它们的脚本中为它们应用一个类。

---

评论后补充：

你有没有尝试结合 @media print和@page？像这样（我通常以这种方式使用它，它对我有用）：

@media print {
    @page  { 
        margin-top: 2cm;
    }
}