Sometime we need to show all content on the web page but hide some content for the print. So, you can use this trick for that.
Hide specific elements while printing web page:
To hide an element, you have to use media="print" in your style tag like this.
<style media="print">
....
....
....
</style>
Example:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style media="print">
.print_ban{
display:none;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elit orci, laoreet hendrerit orci eu, pellentesque suscipit purus. Mauris blandit quam nec velit dapibus, eu pretium mauris hendrerit. Nulla quis sapien lectus. Aliquam ut feugiat ex, pharetra pharetra nisi.
Duis eleifend convallis vestibulum. Vivamus elit tortor, finibus ut nunc vitae, blandit luctus enim. Pellentesque quis ante eros. Donec eget nunc ultricies, dictum nunc ornare, interdum eros. Donec a ipsum erat. Quisque quis nunc eros.</div>
<br>
<div class="print_ban">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elit orci, laoreet hendrerit orci eu, pellentesque suscipit purus. Mauris blandit quam nec velit dapibus, eu pretium mauris hendrerit. Nulla quis sapien lectus. Aliquam ut feugiat ex, pharetra pharetra nisi.
Duis eleifend convallis vestibulum. Vivamus elit tortor, finibus ut nunc vitae, blandit luctus enim. Pellentesque quis ante eros. Donec eget nunc ultricies, dictum nunc ornare, interdum eros. Donec a ipsum erat. Quisque quis nunc eros.</div>
</body>
</html>
This page will show all the content (Both div) but when you go to print then second div will be hide.
Write a comment