發表文章

目前顯示的是有「CSS」標籤的文章

用CSS @media print 設定哪些要列印的資訊

圖片
如果要列印網頁但有些資訊不想顯示,或是需要使用不同的呈現方式,CSS 有針對列印的相關設定。 比如這段 html 說 A. 要顯示在網頁上但列印時不要出現,B. 則是列印要出現。 <div style="text-align: center; font-size: 24pt;"> <h1>Hello World</h1> This is my print page. <div class="no-print"> A.列印不要印出這行 </div> <div class="print-template"> B.列印要出現這行 </div> </div> css 可以這樣設定 print-template:列印時顯示、網頁不顯示 no-print:列印時不顯示、網頁顯示 .print-template { display: none; } @media print { .print-template { display: block; } .no-print { display: none; } } 網頁顯示結果 預覽列印結果