使用css从打印页面中删除URL

时间:2016-10-06 20:41:12

标签: html css printing

<body>
 <div class="print-logo">
  <img class="print-logo img-responsive" id="logo" src="http://logo.png" alt="image" /></div>
    <div class="print-site_name">Published on <em class="placeholder">website name</em> (<a href="http://localhost">http://localhost</a>)</div>
<p />
<div class="print-breadcrumb"><a href="/">Home</a> Reportedly Prepping </div>
<hr class="print-hr" />
    <div class="print-content"><article id="node-ID" class="node node-blog clearfix">   
<div class="bd-headline left"> some title  </div>    
<div class="item-body">
 <p dir="ltr"><span id="docs-internal-guid-???">    
  <img alt="Core" height="366" src="http://image.png" width="645" />  
   <span> contributor helping  report. It’s the latest nightmare.</span><a href="http://url-to-be-removed">some text for the url to be removed(http://url-to-be-removed) then some more text.  
 </p>   
 <p> some more text and another url</p>
</div>   
...   

使用CSS如何删除URL。由于URL在主体中,我尝试使用类名和html标记:

div.print-content article.node .node-blog .clearfix div.item-body p a { content: "";}   

更新
我要删除的部分是粗体    贡献者帮助报告。这是最新的噩梦。some text for the url to be removed (http://url-to-be-removed 然后是更多的文字。

2 个答案:

答案 0 :(得分:1)

要从打印介质中删除URL,请使用:

@media print {
  div.print-content article.node .node-blog .clearfix div.item-body p a {
    display: none;
}

如果你想要的是让它完全消失(从任何视图),只需添加div.print-content article.node .node-blog .clearfix div.item-body p a { display: none; }

以这种方式添加它会将其从文档视图中完全删除,从而释放<a>标记所占用的任何空间。

答案 1 :(得分:0)

MDR_0916

更新

CSS:选择器在每个所选元素的内容之后插入一些东西。

使用content属性指定要插入的内容。 null用于显式阻止生成a[href]:after { content: none !important; }选择器(伪元素)(实际上仅用于覆盖将生成内容的另一个样式)。

content: none表示在每个链接后删除内容。