printing - Use CSS to hide contents on print

Question

Welcome To Ask or Share your Answers For Others

printing - Use CSS to hide contents on print

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

printing - Use CSS to hide contents on print

I’m looking for an easy way to hide everything except a certain div and its contents.

<html>
  <head></head>
  <body>
    <div class="header">...</div>
    <div class="menu">...</div>
    <div class="content">...</div>
    <div class="footer">...</div>
  </body>.
</html>

So, for example, if I want to print only div.content, I would do it like this:

.header, .menu, .footer {
  display: none;
}

And if the layout is complicated, it becomes messy. Is there an easier way to do this with CSS?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:58:56+0000

@media print {
.noPrint {
    display:none;
  }
}

Now you need to apply the class noPrint to the elements you want to hide in printing.

It is good practice to use a style sheet specifically for printing, and and set it's media attribute to print.

Example:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Categories

printing - Use CSS to hide contents on print

printing - Use CSS to hide contents on print

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags