web-dev-qa-db-fra.com

Nécessité de supprimer les valeurs href lors de l’impression dans Chrome

J'essaie de personnaliser le CSS d'impression et de constater qu'il imprime les liens avec la valeur href ainsi que le lien.

Ceci est en Chrome.

Pour ce HTML:

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

Il imprime:

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

Et je veux que ce soit imprimé:

Google
cssprintinghyperlinkprint-css
280
Chris Gratigny

Bootstrap fait la même chose (... comme la réponse sélectionnée ci-dessous).

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

Supprimez-le simplement ou remplacez-le dans votre propre feuille de style d'impression:

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

Ce n'est pas le cas . Quelque part dans votre feuille de style d'impression, vous devez avoir cette section de code:

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

La seule autre possibilité est que vous ayez une extension qui le fasse pour vous.

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

Le travail est parfait.

19
JELEWA.de

Si vous utilisez le CSS suivant

<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" />

changez simplement le style suivant en ajoutant 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" />

Je pense que cela va fonctionner.

l'ancien répond comme

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

n'ont pas bien fonctionné dans la navigation chrome.

9
Wang Jijun

J'ai rencontré un problème similaire uniquement avec un img imbriqué dans mon ancre:

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

Quand j'ai postulé

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

J'ai perdu mon img et toute la largeur de l'ancre pour une raison quelconque, alors j'ai plutôt utilisé:

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

qui a parfaitement fonctionné.

Astuce bonus : inspecter l'aperçu avant impression

4
TrampGuy