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
Release: 2024-10-31 05:21:30
Original
858 people have browsed it

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>
Copy after login
Copy after login

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>
Copy after login
Copy after login

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template