[分享]css内容打印时不分页

CSS内容打印时不分页

@media print {
  /* 禁止分页 */
  html, body {
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  /* 隐藏不必要的元素 */
  #header, #footer, #sidebar {
    display: none;
  }
  /* 保持某些元素在页面上 */
  .page-break {
    page-break-after: always;
  }
} 

CSS内容打印时默认会按照A4纸张大小分页，这时候可能会出现某些元素被分在不同的页面，影响了输出效果。不过，通过一些CSS样式的设置，可以禁止CSS内容打印时的分页，保证所有元素都在同一张纸上输出。

首先，我们需要在@media print属性中定义以下样式：

html, body {
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
} 

这里的关键是设置height属性为auto，将overflow设置为visible，以及将margin设置为0。这样就可以禁止分页，并且去掉在打印时的边距，使得输出更加清晰。

另外，如果有一些元素在分页时需要保持在同一页面中，可以加上这样的设置：

.page-break {
  page-break-after: always;
} 

这里的.page-break可以自定义，可以添加在需要保持在同一页内的元素上，比如一份报告中的小节标题。

最后，可以通过隐藏一些不必要的元素，如首页的页面导航、页脚等等，来使输出更加紧凑，代码如下：

#header, #footer, #sidebar {
  display: none;
} 

这样设置之后，CSS内容打印时不再默认分页，没有多余的边距和空白，输出效果更加清晰，更加符合实际需求。