打印内容被截断需用break-inside: avoid控制容器分页，对表格应在外层div设置该属性或拆分为多个table并用break-before: page分隔，同时thead必须设display: table-header-group以实现跨页表头重复。

打印时内容被截断在页面中间怎么办

浏览器默认按内容流式布局分页，常导致表格、卡片或长段落被硬生生切开。这不是 bug，是 CSS 分页机制未显式干预的结果。关键不是“禁用分页”，而是告诉浏览器「这里可以断页」「那里不能断页」。

• page-break-inside: avoid 用在容器上（如 <div>、<section>），阻止内部被分页切割 —— 但对 Flex/Grid 容器无效（需改用 break-inside: avoid）
• page-break-before: always 或 break-before: page 强制在元素前分页，适合章节标题
• 避免对 <table> 直接加 page-break-inside: avoid，它不生效；应包裹一层 <div style="page-break-inside: avoid"> 再套表格

CSS 的 break-* 属性和 page-break-* 有什么区别

前者（break-before / break-after / break-inside）是现代标准，支持 Flex/Grid/多列布局；后者（page-break-before 等）是旧规范，仅作用于块级流。两者目前多数浏览器都支持，但混用可能冲突。

• 优先用 break-*，尤其当父容器是 display: flex 或 grid 时，page-break-* 完全失效
• break-inside: avoid 在 Chrome/Firefox 中对 <tr> 无效，想让整行不跨页，得把 <tr> 包进 <tbody> 并对 <tbody> 设 break-inside: avoid
• 不要写 page-break-inside: avoid + break-inside: avoid 双重声明 —— 浏览器可能按任意一个解析，行为不可控

为什么加了分页样式却没生效

常见原因是样式未在打印媒体中启用，或被更高优先级规则覆盖。打印样式必须显式写在 @media print 块里，且不能依赖屏幕样式继承。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 检查是否漏了 @media print { ... } 包裹，直接写在全局 CSS 里的 break-inside 在打印预览中通常被忽略
• 打印视图下，display: none、visibility: hidden 仍生效，但 opacity: 0 不会隐藏内容 —— 这会导致本该隐藏的元素参与分页计算
• Chrome 打印预览有时缓存旧样式，按 Ctrl+R（Windows）或 Cmd+R（macOS）强制刷新预览，而非只点「重新加载」按钮

表格跨页时表头重复显示怎么实现

原生 HTML 表格没有自动跨页表头功能，<thead> 在打印时不会自动重复。必须靠 CSS thead { display: table-header-group } 触发浏览器识别。

立即学习“前端免费学习笔记（深入）”；

• 确保 <thead> 是 <table> 的直接子元素，且 <tbody> 存在（哪怕为空）
• 必须写：

  @media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
  }

• Firefox 对 table-header-group 支持最稳；Chrome 90+ 也可靠；Safari 15.4+ 开始支持，但旧版 Safari 完全不支持 —— 如需兼容，只能用 JS 拆表 + 手动插入重复 <thead>

实际分页控制的核心不在 HTML 标签本身，而在 CSS 媒体查询中对 break-* 和 display 的精准组合。最容易被忽略的是：打印样式必须独立声明、表格结构必须规范、以及不同浏览器对 table-header-group 的支持差异。