CODEWITHSUNDEEP
cssprintinghyperlinkprint-css
Chris Gratigny
Chris Gratigny

Reputation: 3253

Need to remove href values when printing in Chrome

I'm attempting to customize the print CSS, and finding that it prints links out with the href value as well as the link.

This is in Chrome.

For this HTML:

<a href="http://www.google.com">Google</a>

It prints:

Google (http://www.google.com)

And I want it to print:

Google

Upvotes: 309

Views: 148210

Answers (7)

Abd Abughazaleh
Abd Abughazaleh

Reputation: 5495

To hide Page url .

use media="print" in style tage example :

<style type="text/css" media="print">
            @page {
                size: auto;   /* auto is the initial value */
                margin: 0;  /* this affects the margin in the printer settings */
            }
            @page { size: portrait; }
</style>

If you want to remove links : 

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}

Upvotes: 3

JELEWA.de
JELEWA.de

Reputation: 291

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

Work's perfect.

Upvotes: 29

Wen Xin
Wen Xin

Reputation: 29

For normal users. Open the inspect window of current page. And type in:

l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
    l[i].href = "";
}

Then you shall not see the url links in print preview.

Upvotes: 0

TrampGuy
TrampGuy

Reputation: 1737

I encountered a similar problem only with a nested img in my anchor:

<a href="some/link">
   <img src="some/src">
</a>

When I applied 

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

I lost my img and the entire anchor width for some reason, so instead I used:

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

which worked perfectly.

Bonus tip: inspect print preview

Upvotes: 5

Wang Jijun
Wang Jijun

Reputation: 326

If you use the following CSS

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

just change it into the following style by adding media="screen"

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

I think it will work.

the former answers like 

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

were not worked well in the chrome browse.

Upvotes: 10

Alex Ghiculescu
Alex Ghiculescu

Reputation: 7540

Bootstrap does the same thing (... as the selected answer below).

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

Just remove it from there, or override it in your own print stylesheet:

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

Upvotes: 628

Eric
Eric

Reputation: 97565

It doesn't. Somewhere in your print stylesheet, you must have this section of code:

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

The only other possibility is you have an extension doing it for you.

Upvotes: 41

Related Questions