打印时排除 HTML 内容 - CSS

在网站中进行打印操作时，我们通常需要控制打印内容的样式和排版。然而，在 HTML 中，可能会包含一些在打印时不需要的元素，例如导航菜单、页脚等。这时，我们可以通过 CSS 的一些技巧来控制打印时需要显示或排除的内容。

排除元素：display 属性

我们可以利用 CSS 的 display 属性来控制元素在打印时是否显示。其中，可以采用以下几种属性值：

• display:none;：该元素在打印时不显示；
• display:block;：及时该元素在网页中为内联元素，也可以在打印时表现为块级元素；
• display:inline-block;：类似 display:block;，但还是为内联元素。

示例代码：

@media print {
  #nav-menu {
    display: none;
  }
}

以上代码将在打印页面时排除 id 为 nav-menu 的元素。

排除内容：content 属性

在打印时，我们有时需要在页面上添加一些内容，例如页眉、页脚、水印等。在 CSS 中，可以使用 content 属性实现。

示例代码：

@media print {
  #footer::before {
    content: "打印时间：" attr(datetime);
  }
}

以上代码将在 id 为 footer 的元素前添加一段文字，显示当前打印时间。

总结

通过控制元素的 display 属性和利用 content 属性，我们可以很方便地控制打印页面的样式和内容。这些技巧同样也可以在针对屏幕/设备的样式表中使用，来达到更好的页面交互效果。

代码片段

@media print {
  #nav-menu {
    display: none;
  }
}

@media print {
  #footer::before {
    content: "打印时间：" attr(datetime);
  }
}

（以上代码片段均为示例代码片段）