Home >Web Front-end >CSS Tutorial >How to Suppress HREF Values in Chrome Printouts?

How to Suppress HREF Values in Chrome Printouts?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 05:21:30898browse

How to Suppress HREF Values in Chrome Printouts?

Suppressing HREF Values in Chrome Printouts

When customizing print styles in Chrome, you may encounter an issue where links are printed with both their text and their HREF values. This can be distracting and aesthetically unappealing.

To resolve this issue, consider the following solutions:

Bootstrap's Print Media Rule

Bootstrap, a popular CSS framework, includes a print media rule that appends HREF values to links. To disable this behavior:

  • Open your print stylesheet or create one.
  • Add the following rule:
<code class="css">@media print {
  a[href]:after {
    content: none !important;
  }
}</code>

This will override Bootstrap's rule and prevent HREF values from being printed.

Custom CSS Override

Alternatively, you can create your own CSS rule to override the default behavior:

<code class="css">@media print {
  a[href]:after {
    content: none !important;
  }
}</code>

Add this rule to your print stylesheet to suppress HREF values when printing in Chrome.

The above is the detailed content of How to Suppress HREF Values in Chrome Printouts?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn