打印页面时隐藏 url

Question

我有这个网页：

当我尝试打印时它看起来像这样：

它故意遗漏了最后一项（用户管理），所以这不是问题。但我想在印刷品中隐藏“(/campaigns)”和“(/profanity)”。

可以使用 CSS 吗？

--编辑-- 这是 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>

Answer 1

@media 标签支持打印。

因此，如果您希望您的块在打印时不显示，请使用以下代码：

@media print {
.noprint {
    display: none !important;
} }

只需将 "noprint" 添加到您想要的任何元素即可。

Answer 2

在您的 CSS 中添加一个 class 称为 noprint for paper：

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

然后将 class 附加到您的代码中

例如：

<div class="comment noprint"> ... </div>

Answer 3

我知道类，这是一个 bootstrap 问题，您会在 bootstrap.css 这条规则中找到

@media print {
  ...
  a[href]:after {
    content: " (" attr(href) ")";
  }
  ...
}

覆盖这条规则，你应该是金色的，例如content:none;

打印页面时隐藏 url

Hide urls when printing a page

css

printing

print-preview

twitter-bootstrap-3