打印时隐藏特定元素的CSS规则必须写在@media print块内，如@media print { .hide-on-print { display: none !important; } }，并确保优先级足够高；visibility: hidden在打印中无效，因浏览器打印引擎忽略它，仅display: none能彻底移出文档流。
打印时隐藏特定元素的CSS规则写在哪？
直接写在页面的 <style> 里或外部 CSS 文件中都行，但必须确保它被 @media print 包裹，且优先级足够高——否则 Bootstrap 自带的打印样式（比如 .d-print-none）可能被覆盖或忽略。
常见错误是把 display: none 写在普通样式块里，结果一打印就全露馅。务必用：
@media print {
.hide-on-print {
display: none !important;
}
}注意 !important：Bootstrap 的打印类（如 .d-print-block）本身带 !important，不加很可能失效。
为什么 visibility: hidden 在打印里不管用？
因为大多数浏览器打印引擎（Chrome、Edge、Firefox）在生成 PDF 或发送到打印机时，会忽略 visibility: hidden —— 它只影响渲染层，不触发“不布局”，而打印样式依赖的是盒模型是否参与文档流。
立即学习“前端免费学习笔记（深入）”；
真正生效的只有：
-
display: none（推荐，彻底移出流） -
opacity: 0不行，内容仍可被选中/复制/打印 -
position: absolute; left: -9999px风险高，某些打印机驱动仍会渲染极小区域
所以别绕弯，老老实实用 display: none + @media print。
如何避免 Bootstrap 的响应式类干扰打印隐藏？
Bootstrap 的 .d-none、.d-md-block 等类在打印时默认不生效（它们只作用于屏幕媒体），但如果你用了 .d-print-none，它和自定义规则混用时容易冲突。
实操建议：
- 不要同时给一个元素加
.d-print-none和自定义.hide-on-print，选其一 - 如果项目已大量用
.d-print-none，就统一用它，别另起炉灶 - 检查 Chrome DevTools → “Rendering” → 勾选 “Emulate CSS media → print”，实时验证效果
特别注意：Bootstrap 5.3+ 中 .d-print-none 实际编译为 display: none !important，和手写等价，但命名更语义化。
敏感信息藏在表格/卡片里怎么精准隐藏？
不能只对整个 <table> 或 <div class="card"> 加隐藏类——往往只需隐藏某列（如“身份证号”列）或某段文字（如“内部编号”）。
正确做法是给目标内容加独立 class：
<td class="hide-on-print">110101199001011234</td> <p class="hide-on-print">内部编号：INT-2024-789</p>
而不是：
<table class="hide-on-print">...</table> <!-- 连表头一起没了 -->
另外，如果内容是通过 JS 动态插入的，确保该 class 在插入时一并带上；否则打印时 DOM 还没更新，隐藏就失效了。
复杂点在于：有些敏感字段可能嵌套在 data-bs-toggle="tooltip" 或 title 属性里——这些属性文本不会被 CSS 影响，得靠 JS 清空或服务端过滤。
