如何使用 CSS 控制列印網頁時顯示哪些元素？

使用 CSS 列印時顯示選擇性內容

許多網頁包含大量資料、版面配置和內容。為了優化列印，您可能只想顯示特定元素。雖然創建單獨的列印頁面可能是一種解決方案，但 CSS 憑藉其「@media print」功能提供了強大的替代方案。

瀏覽器支援「@media print」

「@media print」功能受到現代瀏覽器的廣泛支援。它允許您在列印頁面時專門應用 CSS 規則。支援「@media print」的瀏覽器包括：

• Chrome
• Firefox
• Safari
• Edge

>

目標元素列印

要隱藏除要列印的元素之外的所有元素，可以使用「display:none」屬性。然後，為列印時要顯示的元素新增「printable」類，並將「display:block」套用到「@media print」區塊中的這些元素。

CSS:

但是，如果您希望僅在列印時顯示元素並在瀏覽器中隱藏它們，請考慮使用逆向方法：

CSS：

這種技術會在列印時隱藏除具有「printable」類別的元素之外的所有內容。

其他注意事項

為了避免在列印時顯示連結內容，將「noPrint」類別加入適當的元素或連結。
• 要顯示標誌、信頭或其他僅在列印時出現的元素，請使用「onlyPrint」建立部分

CSS:

HTML:

遵循這些方法，您可以在列印網頁時輕鬆控制特定元素的可見性，減少混亂並優化列印效率。

以上是如何使用 CSS 控制列印網頁時顯示哪些元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！