I have this webpage:
It looks like this when I try to print it:
It's missing the last item (user management) intentionally so that's not a problem. But I'd like to hide the "(/campaigns)" and "(/profanity)" from the print.
Is that possible using CSS?
--EDIT-- This is the HTML:
<div class="row">
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Campaigns</div>
<a href="/campaigns" class="text-muted">
<i class="fa fa-bullhorn"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Campaigns active</th>
<td>1/1</td>
</tr>
<tr>
<th>Total posts</th>
<td>149</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Profanity</div>
<a href="/profanity" class="text-muted">
<i class="fa fa-filter"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Created profanity filters</th>
<td>0</td>
</tr>
<tr>
<th>Total words filtered</th>
<td>0</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">User management</div>
<a href="/account" class="text-muted">
<i class="fa fa-users"></i>
</a>
</div>
</div>
答案 0 :(得分:1)
The @media tag supports print.
So if you want your blocks not to be displayed when in print, use the following code:
@media print {
.noprint {
display: none !important;
} }
Just add "noprint" to any element you want.
答案 1 :(得分:0)
add a class to your CSS called noprint for paper:
@media print {.noprint{display:none;}}
and then append that class to your code
eg:
<div class="comment noprint"> ... </div>
答案 2 :(得分:0)
我认识到这些类,这是一个引导问题,你可以在bootstrap.css中找到这个规则
@media print {
...
a[href]:after {
content: " (" attr(href) ")";
}
...
}
覆盖此规则,您应该是金色的,例如content:none;