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

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

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

• page-break-inside: avoid 用在容器上（如 <div>、<code><section></section>），阻止内部被分页切割 —— 但对 Flex/Grid 容器无效（需改用 break-inside: avoid）
• page-break-before: always 或 break-before: page 强制在元素前分页，适合章节标题
• 避免对 <table> 直接加 <code>page-break-inside: avoid，它不生效；应包裹一层 <div style="page-break-inside: avoid"> 再套表格<h3>CSS 的 break-* 属性和 page-break-* 有什么区别</h3> <p>前者（<code>break-before / break-after / break-inside）是现代标准，支持 Flex/Grid/多列布局；后者（page-break-before 等）是旧规范，仅作用于块级流。两者目前多数浏览器都支持，但混用可能冲突。
  

  html-deploy

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

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

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

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

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

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

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

  • 确保 <thead> 是 <code><table> 的直接子元素，且 <code><tbody> 存在（哪怕为空）<li>必须写：<pre class="brush:php;toolbar:false;">@media print { thead { display: table-header-group; } tfoot { display: table-footer-group; } }</pre> </li> <li>Firefox 对 <code>table-header-group 支持最稳；Chrome 90+ 也可靠；Safari 15.4+ 开始支持，但旧版 Safari 完全不支持 —— 如需兼容，只能用 JS 拆表 + 手动插入重复 <thead><p>实际分页控制的核心不在 HTML 标签本身，而在 CSS 媒体查询中对 <code>break-* 和 display 的精准组合。最容易被忽略的是：打印样式必须独立声明、表格结构必须规范、以及不同浏览器对 table-header-group 的支持差异。