当前位置：首页 > 文章列表 > 文章 > 前端 > HTML打印链接怎么设置？详细教程分享

HTML打印链接怎么设置？详细教程分享

2025-11-16 22:27:57 0浏览收藏

想知道HTML打印链接怎么打吗？本文为你分享详细教程，教你如何通过CSS的`@media print`和`::after`伪元素，在打印时清晰显示链接地址。只需简单几步，如`a::after{content:" ("attr(href) ")";}`，就能让超链接的真实URL在打印页面上呈现。我们还会教你如何仅对外部链接显示URL，避免链接过长导致排版错乱，以及如何通过`word-wrap`和字体调整优化布局。最后，别忘了使用打印预览功能测试效果，确保打印出的文档既美观又实用。掌握这些技巧，让你的HTML打印文档信息更完整！

使用CSS的@media print和::after伪元素可在打印时显示链接地址，如a::after{content:" ("attr(href) ")";}，仅对外部链接显示可加属性选择器，配合word-wrap和字体调整优化布局，通过打印预览测试效果。

html打印链接怎么打_html打印链接如何打详细教程

在网页开发或日常使用中，有时需要将包含链接的 HTML 页面打印出来，并确保链接地址能清晰显示。很多人发现直接打印时，超链接的文字可见，但实际网址却不显示，导致信息不完整。下面教你如何让 HTML 打印时显示链接的真实地址，以及一些实用技巧。

一、让打印时自动显示链接地址

默认情况下，浏览器打印页面不会显示超链接的 URL 地址。我们可以通过 CSS 来控制打印样式，强制在链接后显示其地址。

使用 @media print 和伪元素 ::after 可以实现这一效果。

示例代码：

<style><br>@media print {<br>  a::after {<br>    content: " (" attr(href) ")";<br>    font-size: 80%;<br>    color: #555;<br>  }<br>}<br></style><br><br><a href="https://www.example.com">访问示例网站</a>

打印时会显示为：访问示例网站 (https://www.example.com)

二、只对外部链接显示 URL

如果你只想对外部链接（非本站）显示完整地址，可以添加类名区分或使用属性选择器。

方法示例：

<style><br>@media print {<br>  a[href^="http"]:not([href*="yoursite.com"])::after {<br>    content: " [" attr(href) "]";<br>    font-size: 70%;<br>    color: gray;<br>  }<br>}<br></style>

这个规则只会给以 http 开头且不包含 yoursite.com 的链接添加 URL 显示。