从“媒体打印”屏幕中删除链接引用

Question

我遇到一个小问题，我无法从打印视图中删除链接引用。

这就是我在HTML方面的能力

<table style="width: 436px; height: 374px;" border="0" cellpadding="5">
    <tbody>
        <tr style="background-color: #edfbef;">
            <td><span style="color: #3366ff;"><a title="Electricity Tariffs and Rates" href="http://newfea.oceanic.net.fj/your-home/electricity-tariffs-and-rates/"><span style="color: #3366ff;"><strong>Electricity Tariff &amp; Rates</strong></span></a></span></td>
            <td>Find out how you are being charged for the power you use at home</td>
        </tr>
    </tbody>
</table>

这是我在header.php页面上进行媒体查询的内容

<link href="<?php echo get_template_directory_uri(); ?>/resources/css/print.css" rel="stylesheet" media="print">

以下是普通HTML视图中的外观快照

这是Media Print Vision

您可以从打印视图中看到链接的链接参考。有没有办法可以使用CSS删除它。

我尝试过显示：无，可见性：隐藏，但它没有，因为它隐藏了整个链接文本。

Answer 1

@media print {
  a[href]:after {
    content: none !important;
  }
}

尝试通过上述代码覆盖您的print media。

Answer 2

参考链接：HERE

<span class="printonly"><strong>Electricity Tariff &amp; Rates</strong></span>

在TD上面添加新版本。

[注意：将“printonly”添加到NEW＆lt; td＆gt;仅适用于打印。]

---

我们将在使用附加CSS打印时隐藏在TD之下

[注意：将“无印刷”添加到您的＆lt; td＆gt; ]

  <span class="withoutprint" style="color: #3366ff;">
     .....
       .....

---

CSS

.printonly{
    display:none;
}
    @media print {
    .withoutprint{
        display: none;
    }
    .printonly{
        display:block;
        color: red;
    }
}

Answer 3

这些链接由样式表放置在那里。我猜你使用了主题或boilerplate。

检查这些样式表中的打印样式。

你正在寻找这样的东西：

a[href]:after {
    content: " (" attr(href) ")";
}

你想删除它。

Answer 4

试试这样：

<强> CSS：

@media only print {
    a { text-decoration: none; color: black; cursor: default; }
}

@media only screen {
    a { cursor: pointer; }
}

DEMO