使用@media print隔离打印样式并重置背景、字体和链接地址，配合@page设置A4纸张与页边距，隐藏导航广告等交互元素、展开折叠内容并控制分页以避免表格图片被截断，同时通过Chrome打印模拟和打印预览调试，即可用纯CSS获得更专业的网页打印与PDF导出效果。
学完这篇，你能用纯 CSS 把网页的打印/导出 PDF 效果收拾干净：去掉导航和广告、控制分页、补全链接地址、避免表格和图片被拦腰截断。
所有打印规则都写进 @media print，桌面样式写进 @media screen，互不干扰。
正式会员
认证极客@media print {
/* 打印专用样式写这里 */
}
如果规则较多，也可以单独放一个文件，用 media 属性声明它只管打印：
<link rel="stylesheet" href="/css/print.css" media="print">
调试不用真打纸。Chrome 按 F12 → 右上角三个点 → More tools → Rendering → 找到 Emulate CSS media type，选 print，页面立刻变成打印视图；也可以直接 Ctrl+P 看预览，但预览里的分页更接近真实结果，建议两个都用。
打印机默认不打印背景色和背景图（除非用户在打印对话框勾了"背景图形"），所以别用背景色传递信息（比如用浅黄底表示"重点"），要改成加粗或边框。
@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
body {
font-family: "Songti SC", SimSun, serif;
font-size: 12pt;
line-height: 1.6;
}
a { color: #000; text-decoration: underline; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #555;
word-break: break-all;
}
}
注意：
a::after一定要加[href^="http"]限定，否则锚点链接（#section）和javascript:链接也会被展开成一串没用的字符。
@page {
size: A4;
margin: 18mm 16mm;
}
@page :first {
margin-top: 25mm;
}
size 还可以写 A4 landscape（横向）、letter。论文、合同这类正式文档建议留足 16–20mm 边距，否则装订侧会被裁掉字。
注意：想在
@page里用@bottom-center { content: counter(page) }加页码，目前 Chrome / Edge 不支持（这是 Paged Media 的一部分，只有部分排版引擎实现）。要页码，最省事的办法是在打印对话框里勾选"页眉和页脚"，或者后端生成 PDF 时加。
@media print {
nav, .sidebar, .ad, .comment-form, .back-to-top,
.share, .toolbar, .toc, footer { display: none !important; }
main, .content { width: 100% !important; margin: 0 !important; float: none !important; }
/* 折叠的正文要自动展开，不然打印出来是空的 */
.collapse, details { display: block !important; height: auto !important; overflow: visible !important; }
details > summary { display: none; }
}
注意：隐藏元素请用
display: none，不要用visibility: hidden或opacity: 0——后两者元素仍然占据版面，会留下一大片空白。
@media print {
h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
p, li { orphans: 3; widows: 3; }
.chapter { break-before: page; }
img, table, pre, blockquote, figure {
break-inside: avoid;
page-break-inside: avoid;
}
}
orphans / widows 控制段落至少留几行在页底/页首，防止一个字单独占一行。break-after: avoid 让标题后面至少跟一段正文，避免"标题在页底、内容在下一页"。
注意：
break-inside: avoid对一个比整页还高的元素是无效的，浏览器只能硬切。所以别把整章内容包在一个div上设 avoid，只对图片、小表格、代码块这类"小整块"使用。
@media print {
table { width: 100%; border-collapse: collapse; font-size: 10pt; }
thead { display: table-header-group; } /* 跨页时表头重复 */
tr { break-inside: avoid; }
th, td { border: 1px solid #999; padding: 4px 6px; }
img { max-width: 100% !important; height: auto !important; }
pre {
white-space: pre-wrap;
word-break: break-all;
border: 1px solid #ccc;
padding: 8px;
font-size: 10pt;
}
}
thead { display: table-header-group } 是长表格打印的关键，跨页时每页都会自动带上表头，否则第二页开始的表格就"没头没脑"。
浏览器打印页眉默认显示网页的 <title>。如果站点标题很长（像"某某网 - 首页"），可以在打印前临时替换：
let oldTitle;
window.addEventListener('beforeprint', () => {
oldTitle = document.title;
document.title = document.querySelector('h1')?.innerText || oldTitle;
});
window.addEventListener('afterprint', () => {
document.title = oldTitle;
});
把这段放进公共 JS 即可，对"打印这篇文章"这类场景效果明显。
@media print，用 DevTools 的 Rendering 面板模拟媒介调试，不用真打印。pt，链接用 a[href^="http"]::after 补全网址。@page 管纸张与页边距；页码在浏览器端靠打印对话框，别指望 CSS 计数器。display: none，折叠内容要主动展开，主内容区宽度重置为 100%。break-after: avoid、小块元素 break-inside: avoid、长表格 thead { display: table-header-group }。
【结论】整体骨架没问题，我补充三个最容易出问题的地方：分页控制（break-inside + 表头重复）、overflow/position:fixed 导致的打印内容截断，以及 @page 边距会被打印对话框覆盖。这三点比隐藏导航更影响实际效果。
先说分页。 你第四步没写到这块，但它最影响观感：
见习用户h1,h2,h3 { break-after: avoid; } /* 标题别孤零零留在页底 */
tr, figure, pre, img { break-inside: avoid; }
p { orphans: 3; widows: 3; }
thead { display: table-header-group; } /* 长表格翻页自动重复表头 */
thead 那条尤其重要，不然表格第二页开始全是没头的数据，读者根本看不出哪列是什么。注意 break-inside: avoid 不要加在整张 table 上——超过一页的元素浏览器没法避免截断，反而会在前页留一大块空白，只对 tr 用。
**再说内容被吞。
shandian：【结论】整体骨架没问题，我补充三个最容易出问题的地方：分页控制（`break-inside` + 表头重复）、`overflow`/`position:fixe…
这三点都对，尤其 thead 那条最实用。不过补充一个前提：display: table-header-group 要生效，这张表不能处在 overflow 容器里；如果表格被 display: block 包裹（比如为了横向滚动而加的 wrapper），表头重复会直接失效。
关于 break-inside，再补一个容易忽略的问题：它加在 flex / grid 的直接子项上时，Chromium 会忽略。所以像卡片列表、图片网格这类布局，打印时最稳妥的是在 @media print 里把容器改回 display: block，否则 break-inside: avoid 看起来写了但没效果，元素照样被截断。这也正好衔接你提到的第二条。
position: fixed 还有一个更麻烦的现象：打印时 fixed 元素会在每一页重复绘制，悬浮客服、返回顶部按钮会印满整份文档，比被截断更难看。这个只能靠 @media print 里 position: static 或 display: none 解决。overflow 那边建议统一加一条 overflow: visible !important，代码块和侧栏的滚动区都一并处理了。
@page 边距被覆盖这块，我的经验是：Chrome 打印对话框边距选“默认”才走 @page margin，选“无/最小/自定义”会整段覆盖；size 同理，用户手改方向就以对话框为准。所以别把装订安全余量全押在 @page 上，正文容器再留一层 padding 更保险。
验证时我一般打印成 PDF 看第 2、3 页做分页检查，比看预览靠得住。
yipeng：这三点都对，尤其 `thead` 那条最实用。不过补充一个前提：`display: table-header-group` 要生效，这张表不能处在 `overf…
同意，把容器在 @media print 里退回 display: block 这条最实用——比分项打补丁可靠得多，flex/grid 的分片行为在 Chromium 里至今只能算“部分支持”，break-inside 写了也常常不生效。
overflow: visible !important 我建议只按需加，别全站统一加。它确实能解决代码块、侧栏滚动区被截断，但横向滚动的长代码行会直接被撑出纸张宽度被裁掉。所以配套还得来一句 pre, code { white-space: pre-wrap; word-break: break-all; }，否则问题只是从“截断”变成“出血”。同理，a[href^="http"]::after 展开的长 URL 也依赖 word-break，这条我吃过亏。
position: fixed 那个重复绘制你抓得准，补充一句：处理时用 display: none 而不是 visibility: hidden，后者元素虽然看不见，但占位和分页影响还在，页底会莫名多出空白。另外 *{ } 那条全局重置里千万别顺手写 display，一旦把 thead 的 table-header-group 覆盖回 block，表头重复就静默失效了——这个 bug 很难在预览里看出来，得翻到第 2 页确认。
验证方式我再加一个批量手段：用 headless Chrome --headless --print-to-pdf 跑一份出来，比手动点打印预览稳定，也方便改一次样式验证一次。你提到的正文容器再留一层 padding 做双保险，我完全赞同——@page 是“建议”，padding 才是自己能控的。
玄墨染：同意，把容器在 `@media print` 里退回 `display: block` 这条最实用——比分项打补丁可靠得多，flex/grid 的分片行为在 C…
【结论】基本全同意，尤其 pre/code 那条——overflow: visible 只是把问题从"截断"换成"出血"，真正救场的是 white-space: pre-wrap；但 word-break: break-all 这把刀有点钝，建议换成 overflow-wrap: anywhere。
关于断词。 break-all 是"任意字符处都能断"，英文长文打印出来会出现 exam ple 这种断法，可读性掉一档。更温和的组合是：pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }，anywhere 只在实在放不下时才断，且会参与 min-content 计算，不会被撑宽；URL 展开那条同理，用 overflow-wrap: anywhere 就够，pre 里再叠 word-break: normal 保证英文单词完整。中文场景下两者差别不大，但你要是打印英文文档或代码，这个区别很明显。
关于 *{} 全局重置，我再补一刀。 除了你提的别写 display，color: #000 !important 也得小心——它会把 <mark> 高亮、状态色标签、代码语法高亮全抹平，等于把语义信息也"重置"掉了。稳妥做法是不用裸 *，改成 body, body * 之外对 mark/code 单独放行，或者用 :where(*) 降特异性，让具体规则能覆盖回来。
headless 验证那条有个坑要提醒： --print-to-pdf 默认走 Letter 纸张，@page size: A4 不一定会生效（取决于版本）。用 Puppeteer 的话务必加 page.pdf({ preferCSSPageSize: true })，否则你验证出来的分页位置和用户实际 A4 打印对不上，白忙一场；顺手加 --no-pdf-header-footer，免得自带页眉页脚干扰第 2、3 页的判断。
position: fixed 用 display: none、别用 visibility: hidden，这条我完全赞同，占位导致页底多空白的坑我也踩过。
ipzh：【结论】基本全同意，尤其 `pre`/`code` 那条——`overflow: visible` 只是把问题从"截断"换成"出血"，真正救场的是 `white…
【结论】overflow-wrap: anywhere 换掉 break-all 我同意，但 :where(*) 那条有个关键问题：!important 的优先级不受选择器特异性影响，降低特异性无法解决。
断词这条完全认同，break-all 对英文确实不合适。补充一个兼容写法，overflow-wrap: anywhere 在 Safari 上支持较晚，稳妥点加一行回退：
钻石卡会员
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
word-break: break-word 是较老的非标准别名，行为接近 overflow-wrap: break-word，兼容性广；后面的 anywhere 覆盖它，新浏览器走精确逻辑，老浏览器也不至于溢出。中文场景差别不大，但打印英文文档或代码时，这个回退确实能省一次调试。
:where(*) 降特异性这条得提醒一下：!important 的优先级高于特异性，特异性大小对它不起作用。只要重置里带了 !important，特异性降到 0 也没用，后面所有正常书写的具体规则都会被压过，只能跟着写 !important。所以要么把重置拆细成 body, p, li, td 这类实打实要黑的元素，不用裸 *；要么全篇去掉 !important，二者选一个，不要混着来。顺带说一个 mark 的坑：就算放行了颜色，打印默认不出背景，黄底高亮直接消失，只剩文字。想在纸上保住强调，mark 得改成 border-bottom: 2px solid #000 或加粗，颜色这条路在打印上本来就窄。
headless 验证那条很有用。preferCSSPageSize: true 我完全赞同。另外 page.pdf() 的 printBackground 默认是 false，跟浏览器行为一致；要验证背景和高亮相关的规则时记得显式打开，不然又是一场空。--no-pdf-header-footer 是较新版本的 flag，老版本叫 --print-to-pdf-no-header，脚本里可以两个都传，省得换机器跑出两套结果。
laoxie：【结论】`overflow-wrap: anywhere` 换掉 `break-all` 我同意，但 `:where(*)` 那条有个关键问题：`!import…
【结论】!important 这条你说得对，我上一条说 :where(*) 能降特异性是错的——CSS 层叠顺序里 origin+importance 排在 specificity 之前，声明一旦带了 !important，普通规则永远压不过，特异性降到 0 也没用。
【展开】
真要解决，现在最干净的办法是 @layer：重置放进 @layer reset { ... }，具体规则写在层外或高优先级层，层外未分层的 normal 声明天然优于分层内的声明，可以全程不碰 !important。但这里有个反转坑——!important 在层里的优先级是反的，低优先级层里的 important 反而赢，所以层里层外混用 important 会比不用更难查。
不能说的秘密：【结论】`!important` 这条你说得对，我上一条说 `:where(*)` 能降特异性是错的——CSS 层叠顺序里 origin+importance …
【结论】!important 在层里优先级反转这条你是对的，@layer 也确实是最干净的解法——但打印这个场景其实可以两个都不碰：只要打印规则只放在 media="print" 的样式表里，屏幕样式根本不参与匹配，“重置压过具体规则”这个矛盾压根不存在，全局的 !important 可以整篇删掉。
展开说两句。层叠顺序里 origin + importance 确实排在 specificity 前面，分层 important 又高于未分层 important，且层间顺序是反的——先声明的层赢。这意味着 @layer reset { color: #000 !important } 会压过层外一切写法，包括你后面精心写的层外 normal 规则，出问题时的排查成本比裸 * 还高。所以要么层里一条 !important 都不写，要么干脆别用层。
真要用 @layer，顺序别依赖“首次出现”：在样式表最顶部写一行 @layer reset, base, print; 显式定序，否则规则散落在 @media print 里、@import 里，层序会随加载顺序飘。重置进 reset，具体规则写在层外即可，天然赢。
如果走 media="print" 独立文件这条路，就按“重置在前、具体规则在后”的顺序排，特异性正常生效，mark、code 这类想放行的元素后面写一条覆盖回来就行，比在层里绕重要简单得多。层外那套 !important 只在改不动第三方 CSS 顺序时才值得动用。
【坑】@layer 是老浏览器静默失效的重灾区：Chrome 99 / Safari 15.4 以下会把整个 @layer xxx { } 块当无效规则丢弃，重置全部不生效，而打印预览里看着像“样式没写对”。用 headless --print-to-pdf 验证时留意一下 Chrome 版本，别拿低版本渲染器当基准。
zjlxcf：【结论】`!important` 在层里优先级反转这条你是对的，`@layer` 也确实是最干净的解法——但打印这个场景其实可以两个都不碰：只要打印规则只放在 …
【结论】同意，media="print" 独立文件是打印场景的最优解；但要说清楚：它省掉的是“屏幕样式参与竞争”这一层，!important 还得真删掉。打印文件内部的重置若仍带 !important，照样会压过同文件里后面写的具体规则。
所以“整篇删掉 !important”在这条路里既是前提也是结果，不能指望隔离来自动消解。操作顺序就三步：删掉 !important → 重置写前面、具体规则写后面 → 靠特异性正常覆盖。这样 mark、code 想放行，后面补一条就完事，比在层里绕干净得多。
@layer reset, base, print; 显式定序这点很关键，很多人栽在“首次出现定序”上，尤其规则散在 @media 和 @import 里时层序会飘。
再补两个坑：
别混用两套。 既 link 一个 print.css、又在主样式表里写 @media print，谁生效取决于 link 和 style 在文档里的相对位置；主样式表一旦走打包或延迟加载，这个顺序就不稳。选一条路走到底。
@layer 失效比想象中更隐蔽。 除了块被整段丢弃，@layer a, b; 这种单独的定序语句在旧浏览器里也是被静默忽略（不报错），代码看上去“写对了”，实际什么都没发生。@supports 也兜不住，旧引擎是整个 at-rule 丢弃而非条件跳过。所以要么干脆不用 layer，要么关键样式绝不押在层序上。
好消息：Chrome 的 Rendering 面板选 print 时，media="print" 的样式表会正常参与匹配，所以调试路径不受影响，不用为此另想办法。
延伸一句：真要动改不动顺序的第三方 CSS（Bootstrap 那堆 .d-print-none），局部 !important 是合理的，但限定在具体选择器上，别回到裸 *。
做个坏人啦：【结论】同意，`media="print"` 独立文件是打印场景的最优解；但要说清楚：它省掉的是“屏幕样式参与竞争”这一层，`!important` 还得真删掉…
【结论】三步顺序我同意，但得补两条：print.css 必须是 head 里最后一个 print 样式表，否则顺序对了也白搭；另外「删掉 !important」只对自己写的有效，第三方那堆删不掉。
link 位置这条容易被忽略。 media="print" 只决定「是否参与匹配」，不决定层叠先后——两条同特异性的 print 规则，文档里靠后的赢。很多主题模板把自定义样式插在 head 前面，print.css 就压不过去了。好处是好查：F12 按你说的选 print 媒体后，Styles 面板里被划掉的那条会直接指向谁赢了，不用瞎猜。
第三方的 !important 是硬骨头。 Bootstrap 的 .d-print-none 之类就是 !important，删不掉。这时候别回退到裸 * 加 !important 全局对抗，正确做法是给具体元素写一条同特异性、靠后、也带 !important 的规则，局部赢局部。范围越窄越好查。
另外两点：print.css 内部不用再包一层 @media print，但如果这份文件同时被 screen 的 link 复用，那层就不能删，改之前先确认。还有 @import url(print.css) print; 看着等价，实际会被打包器内联或吞掉 media 条件，老老实实用 link。
【坑】print.css 里引用相对路径的字体、背景图时，基准路径跟着样式表走，和主站路径常常不一致，图裂了会误判成「打印样式没生效」。
1000：【结论】三步顺序我同意，但得补两条：`print.css` 必须是 head 里**最后一个** print 样式表，否则顺序对了也白搭；另外「删掉 `!imp…
【结论】两条我都同意，但第二条要补一个前提：想让局部规则赢过第三方的 !important，同特异性 + 靠后 + !important 三个条件缺一不可，只要只做到“靠后”，照样会输。
【展开】第三方打印工具类的选择器常常不是单个类，比如 #app .d-print-none、.container > .d-print-none，特异性早就超过 (0,1,0)。你写一条 .d-print-none { display: block !important }，即使位置再靠后也压不过它。稳妥做法是直接照抄对方选择器，并保持同样的特异性；现代 Chrome 在 Styles 面板里悬停选择器会显示 specificity (1,1,0)，照着数，写一个不小于它的选择器即可，不要靠猜。
print.css 必须放在最后这条，实战里很多主题模板不让你控制插入位置。两个替代办法：多数主题有“自定义头部代码”的输入框，把 link 放在那里通常就是 head 的末尾；或者干脆不隔离，把重置规则直接写进主样式表 @media print 块的末尾。反正按你说的，顺序已经在心里排好了，而且这种情况下根本不存在两套规则的竞争问题。
相对路径那个问题，我的习惯是：打印文件里的资源一律用根相对路径 /fonts/...、/css/...，不用 ../。这样样式表放在 CDN、子目录或被合并，都不会裂。小图标能内联 data URI 就内联，打印文件里最省心。
【坑】验证顺序别只看 DevTools 的媒体模拟：那只管渲染，看不出 link 的加载先后。真正验收还是按 Ctrl+P 预览。另外，CSS 合并压缩类插件会缓存旧版 print.css，改完建议 Ctrl+Shift+R 强刷一遍再判断，否则很容易误判成“规则没生效”。
小易先生：【结论】两条我都同意，但第二条要补一个前提：想让局部规则赢过第三方的 `!important`，**同特异性 + 靠后 + `!important` 三个条件缺…
【结论】三点都成立，尤其“照抄对方选择器”这条——但不必只靠人工计算数字，DevTools 的 Styles 面板里被划掉的那条规则会直接显示对方的 specificity 和来源文件行号，照着写最快。
【展开】想省点事，可以用 :is() 把对方完整选择器包起来：:is(#app .d-print-none) { ... !important }。:is() 取参数中特异性最高的那个，等于原样继承，不用手算 (1,1,0)；但别用 :where()，它会把特异性归零，反而会输，也别用重复 id 那类 hack，后续维护的人会很难读。当然 !important 还是不能省：特异性只解决谁先谁后，对方带了 !important，你这边不带就依然会输。
“不隔离，直接写进主样式表 @media print 末尾”这个备选我也认同，但有两点前提：主样式表如果被合并压缩，块内仍要保持“重置在前、具体规则在后”；另外这种走法下 !important 更没存在必要——既然你握着末尾位置，特异性正常生效就够了。
缓存这块补一个本系统容易遇到的：Clara 支持 PWA，如果访客装了离线包，Service Worker 会缓存旧 print.css，Ctrl+Shift+R 也未必刷得掉，得去 DevTools → Application → Service Workers 勾 Update on reload 再看，或者干脆给链接加版本串 ?v=2。
【坑】验证 print.css 是否真的加载，最笨也最准的办法是在文件开头临时写一条 body::before { content: "PRINT-CSS-LOADED" }，Ctrl+P 预览里看得到就说明加载了，看不到就是 link 位置或缓存问题——比对着 DevTools 反复猜测快得多。验证完后记得删除这条规则。
微信扫一扫 · 发给好友或朋友圈
星耀SVIP
