html打印超链接与不需要的额外链接

时间:2013-07-19 20:33:03

标签: html css printing

我正在这个有打印问题的网站上工作,如果我打印一下,超链接打印出两次:这就是我的两次意思

Html代码:<p>Urgent Care: <a href="tel:765-494-1700">765-494-1724</a>.</p>

打印输出: 紧急护理:7654941724(电话:7654941700)

我只需要紧急护理:765-494-1724(不是电话:7654941700)。但是,我确实需要超链接为<a href="tel:765-494-1700">,因为这个超链接需要在手机上使用,当人们点击它时,它会自动将它们驱动到拨号屏幕。

在我的print.css文件中,我实际上已经尝试通过执行以下操作来解决此问题:

a:link, a:visited  {
content: "";
}

但它不起作用:(所以我希望如果可能的话我可以就这个问题得到一些想法。万分感谢!!!

P.S。:在MAC OS,chrome,safari,firefox上工作都不能正确打印...

4 个答案:

答案 0 :(得分:3)

将此添加到您的print.css(并删除您的a:link, a:visited规则)

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

答案 1 :(得分:0)

您的HTML:

Urgent Care: <a href="tel:765-494-1700"><span class="phonenumber">765-494-1724</span></a>

你的CSS:

@media print {
  a span.phonenumber{
    display:none;
  }
}

这会隐藏链接中的文字,因此它只显示链接本身的文本,即电话号码(tel:765-494-1700)。

但是,您可能不需要创建链接,因为大多数移动浏览器会将任意数字识别为电话号码。

或者,您也可以将电话号码设为纯文本(或带有空白href的链接),并使用Javascript填写href。

答案 2 :(得分:-1)

如果你刚刚建立了这样的链接怎么办:

<a href="tel:765-494-1700">.</a></p>

这会让它只出现一次吗?

答案 3 :(得分:-1)

你的打印CSS中的

如下所示:

@media print
  {
    a.no_print{display:none;}
    a.to_print{display:block;}
  }

在常规css中,你做了相反的事情:

a.no_print{display:block;}
a.to_print{display:none;}

你的HTML:

<p>Urgent Care: <a href="tel:765-494-1700" class="no_print" >765-494-1724</a> <a class="to_print" >765-494-1724</a>.</p>