web-dev-qa-db-ja.com

Chromeで印刷するときにhref値を削除する必要がある

私はprint CSSをカスタマイズしようとしています、そしてそれがリンクと同様にhref値でリンクを印刷することを発見しました。

これはChromeです。

このHTMLの場合：

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

それは印刷されます：

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

そして私はそれを印刷してほしい：

Google
cssprintinghyperlinkprint-css
277
Chris Gratigny

ブートストラップは同じことをします（...以下の選択された答えのように）。

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

そこから削除するか、独自の印刷スタイルシートで上書きしてください。

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

そうではありません 。印刷スタイルシートのどこかに、このセクションのコードが必要です。

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

唯一の他の可能性はあなたがあなたのためにそれをするエクステンションを持っていることです。

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

仕事は完璧です。

18
JELEWA.de

以下の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" />

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

私はそれがうまくいくと思います。

前者のように答えます

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

クロムブラウズではうまくいきませんでした。

9
Wang Jijun

私は私のアンカーで入れ子になったimgだけで同様の問題に遭遇しました：

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

応募したとき

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

私は何らかの理由で私の画像と全体のアンカーの幅を失ったので、代わりに私が使った：

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

これは完璧に機能しました。

ボーナスチップ： 印刷プレビューの閲覧

4
TrampGuy