使用CSS的@media print和::after伪元素可在打印时显示链接地址，如a::after{content:" ("attr(href) ")";}，仅对外部链接显示可加属性选择器，配合word-wrap和字体调整优化布局，通过打印预览测试效果。
在网页开发或日常使用中，有时需要将包含链接的 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 显示。
三、避免打断排版或换行错乱
长链接可能在打印时造成布局问题。建议设置断字和字体大小控制。
可添加以下样式优化打印效果：
- 设置 word-wrap: break-word 防止溢出
- 使用较小字体显示 URL，如 font-size: 0.8em
- 颜色设为灰色，避免干扰主内容
四、测试打印效果
在真实打印前，可通过浏览器的打印预览功能查看效果。
操作步骤：
- 按 Ctrl+P（Windows）或 Cmd+P（Mac）打开打印预览
- 检查链接地址是否正常显示
- 调整 CSS 直到格式满意
基本上就这些。通过简单的 CSS 控制，就能让 HTML 页面在打印时清晰展示链接地址，提升文档实用性。关键是利用 @media print 和 attr(href) 动态插入链接内容，再稍作样式美化即可。
