How Can I Print a Webpage While Hiding Specific Elements?

How to Print a Webpage without Displaying Specific Elements

When preparing a webpage for printing, it's often desirable to hide certain elements that are not intended to appear on the printed page. This includes elements such as navigation buttons or copyright notices.

Solution

To achieve this, you can utilize a combination of CSS media queries and HTML class attributes. Here's a step-by-step guide:

1. Stylesheet Modification

In your website's stylesheet, add the following CSS code:

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

2. HTML Class Attribute

In your HTML code, identify the elements you want to hide during printing by adding the class attribute 'no-print' to them.

Example HTML:

<a href="#" class="no-print">Print This Page</a>
<p>Good Evening</p>

3. Result

When the webpage is printed, the CSS media query will hide all elements with the 'no-print' class, including the link to print the page itself. As a result, the printed output will only display the text "Good Evening" without the "Print" label.

The above is the detailed content of How Can I Print a Webpage While Hiding Specific Elements?. For more information, please follow other related articles on the PHP Chinese website!