up
down
Close
架站盒子
Web Development Box
 

CSS 控制網頁列印的元素與樣式

│ 986 Views │ CSS

先簡單寫一個HTML網頁範例(尚未設定列印部分):

<header>
  頁首
</header>
<main>
  <h1>標題</h1>
  <div class="content">內容</div>
  <div class="content">描述</div>
</main>
<footer>
  頁尾
</footer>
<style>
header, main, footer {
  max-width: 500px;
  border: 1px solid;
  text-align: center;
  padding: 5px;
  margin:0 auto;
  margin-top:20px;
}
main {
  border:unset;
}
.content {
  font-size: 1.5em;
  border: 1px solid;
  margin: 5px;
  height:300px;
}
h1 {
  margin: 5px;
}
<style>

列印畫面(設定前):

網頁範例(設定前)
網頁範例(設定前)

這裡可以看到日期、網址等多餘的部分,且如果「內容」與「描述」的部分過長,在列印時可能就會被區分兩段,造成美感上的流失,假設只希望客戶端列印「內容」與「描述」的部分,並且不要在換頁時中斷,可以怎麼做?請見以下說明。

CSS控制網頁列印的元素與樣式

CSS中加上@media print即可控制網頁列印的元素與樣式,@page可以指定間距與列印尺寸,把不要列印的元素用display:none;隱藏即可,用page-break-inside來控制元素不因為換頁而中斷,用page-break-after: always來控制碰到該元素時進行換頁。

@media print {
  @page {
    margin: 1em; /* 間距 */
    size: A4 portrait; /* 尺寸混和 */
  }
  header,footer,h1 {
    display: none; /* 讓頭尾與標題隱藏 */
  }
  .content {
   page-break-inside: avoid; /* 使元素不會於換頁時中斷*/
   page-break-after: always; /* 碰到該元素時換頁 */
  }
}

列印畫面(設定後):

用CSS控制列印指定的範圍
用CSS控制列印指定的範圍

如果想控制列印時的文字顏色、背景顏色等,只要把CSS寫進@media print中即可,以下的範例是控制列印的文字顏色為藍色。

@media print {
  .content {
   color:#4489b4;
  }
}

列印效果:

用CSS控制列印的樣式
用CSS控制列印的樣式

延伸閱讀

本文是否對您有幫助?