css - 打印页面时隐藏 url

标签 css printing twitter-bootstrap-3 print-preview

我有这个网页: enter image description here

当我尝试打印它时它看起来像这样: enter image description here

它故意遗漏了最后一项(用户管理),所以这不是问题。 但我想在打印中隐藏“(/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>

最佳答案

@media 标签支持打印。

因此,如果您希望您的 block 在打印时不显示,请使用以下代码:

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

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

关于css - 打印页面时隐藏 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31070228/

相关文章:

c# - 如何知道使用复制命令到本地打印机的打印过程何时成功完成?

javascript - Div 中的文本/字体大小在 Firefox 中的打印模式与 "normal"模式下不同

python - 在python中的引号内打印多个变量

css - 两个 col-md-6 不适用于响应式

javascript - 将滚动条添加到 Bootstrap token 字段自动完成

html - 响应式 div 顺序

html - 一次编写,多次用于不同内容的对话框 CSS

html - CSS 高度有效但最小高度无效

javascript - 尝试为包含单词的特定 <tr> 设置 CSS 样式

javascript - 帮助 jquery 选择器