image
Morshed Alam

How to prevent print a block of an HTML page?

Css, Html, Security
Sometimes you may need to prevent printing a block of an html page. You can do it easily. Create a CSS class by following way and add it to your header section:

<style type="text/css" media = "print">
.noprint{display: none;}
</style>

Note that the media of the css script will be print. Now simply add the css class noprint to any elements in your HTML which you do not want to printed.

Below is the sample example to prevent printing a block:

<html>
<head>
<title>Prevent to printing a block of an html</title>
<style type="text/css" media = "print">
.noprint{display: none;}
</style>
</head>
<body>
<div>
  <div class="noprint">This is the sample block which will not print...</div>
  <div><h3>This is the sample text which will print when print this page from File > Print</h3></div>
  <div class="noprint">This is another block which will not print...</div>
</div>
</body>
</html>

Just make a html page by above code and print it from File > Print

7 Comments

Leave a Reply to Jitu Cancel reply