How Can I Hide Unwanted Elements When Printing a Webpage?

Hiding Elements During Webpage Printing

Printing webpages may occasionally print elements that are unwanted in the final printout, such as buttons or links. To resolve this issue, consider:

CSS Media Query:

Utilize CSS media queries to target elements based on the print media type. For instance:

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

HTML Class Assignment:

Next, assign a class (e.g., "no-print") to the elements you want to hide during printing. For example:

<button class="no-print">Print Here</button>

By employing this method, the "Print Here" button will be concealed during printing, as assigned by the "no-print" class and the CSS media query that sets "display: none" for print media.

The above is the detailed content of How Can I Hide Unwanted Elements When Printing a Webpage?. For more information, please follow other related articles on the PHP Chinese website!