È necessario rimuovere i valori href quando si stampa in Chrome

290

Sto tentando di personalizzare il CSS di stampa e sto scoprendo che stampa i collegamenti con il hrefvalore e il collegamento.

Questo è in Chrome.

Per questo HTML:

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

Stampa:

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

E voglio che stampi:

Google

— Chris Gratigny
fonte

1

Ricorda PERCHÉ ogni grande framework CSS lo fa - non puoi fare clic sulla carta! Quindi, se hai intenzione di disattivarlo, dovresti aggiungere un elenco di collegamenti in basso, come questo: alistapart.com/article/improvingprint

— Julix

1

È vero, ma penso che sia meglio avere il controllo di quando e dove appare il collegamento. Ad esempio, nei miei collegamenti voglio che appaiano nella riga successiva dopo il testo e senza parentesi. Quindi mostro solo l'URL nel testo.

— user4052054

602

Bootstrap fa la stessa cosa (... della risposta selezionata di seguito).

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

Basta rimuoverlo da lì o sovrascriverlo nel tuo foglio di stile di stampa:

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

— Alex Ghiculescu
fonte

17

<style>@media print{a[href]:after{content:none}}</style>Principalmente pubblicando per me stesso quando continuo a tornare a questa pagina, grazie

— William Entriken,

1

Apparentemente anche la Fondazione fa la stessa cosa.

— spasticninja,

Sembra che HTML5 Boilerplate faccia anche questo! Quindi immagino di

— doverlo

Avviso: si sono verificati problemi in cui una tabella talvolta perdeva le ultime righe durante la stampa. Si è scoperto che questa regola era il colpevole, o almeno rimuoverlo risolto il problema. Non so perché abbia avuto quell'effetto.

— Henrik N,

1

@HenrikN - Penso che sia correlato alle colonne bootstrap mobili. usando, float:nonese necessario, risolto un problema simile per me qualche settimana fa; potrebbe aiutarti, ma questo è un problema diverso

— Andrew,

40

E non lo fa . Da qualche parte nel tuo foglio di stile di stampa, devi avere questa sezione di codice:

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

L'unica altra possibilità è che hai un'estensione che lo fa per te.

— Eric
fonte

1

L'ho preso in Zurb Foundation CSS.

— forX

26

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

Espandi frammento

Il lavoro è perfetto

— JELEWA.de
fonte

10

Se si utilizza il seguente 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" />

basta cambiarlo nel seguente stile aggiungendo 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" />

Penso che funzionerà.

il primo risponde come

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

non hanno funzionato bene nella navigazione di Chrome.

— Wang Jijun
fonte

4

Ho riscontrato un problema simile solo con un img nidificato nella mia ancora:

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

Quando ho fatto domanda

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

Ho perso il mio img e l'intera larghezza dell'ancoraggio per qualche motivo, quindi invece ho usato:

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

che ha funzionato perfettamente.

Suggerimento bonus : ispeziona l'anteprima di stampa

— TrampGuy
fonte

1

Per nascondere l'URL della pagina.

utilizzare media="print"nell'esempio di stile tage:

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

Se si desidera rimuovere i collegamenti:

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

— Abd Abughazaleh
fonte

-2

Per utenti normali. Aprire la finestra di ispezione della pagina corrente. E digitare:

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

Quindi non vedrai i link dell'URL nell'anteprima di stampa.

— Wen Xin
fonte

Questa è una buona soluzione se non hai alcun controllo sul codice sorgente della pagina che stai tentando di stampare.

— Paddymac,