How do I hide an element when printing a web page?

css printing
sourav picture sourav · Dec 10, 2008 · Viewed 457.6k times · Source

I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.

Is there javascript or HTML code which would hide the link button when I click the print link?

Example:

 "Good Evening"
 Print (click Here To Print)

I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.

Answer

Diodeus - James MacFarlane picture Diodeus - James MacFarlane · Dec 10, 2008

In your stylesheet add:

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

Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.

Related questions

Print <div id="printarea"></div> only?

How do I print the indicated div (without manually disabling all other content on the page)? I want to avoid a new preview dialog, so creating a new window with this content is not useful. The page contains a couple …

Read More
How to make a HTML Page in A4 paper size page(s)?

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions …

Read More
How to print HTML content on click of a button, but not the page?

I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print …

Read More