HTML打印时如何避免图片标题分页？是否存在<printgroup>标签？

不需要特殊的HTML标签，用CSS的打印媒体查询就能轻松实现分组内容不被分页拆分，具体步骤如下：

• 把标题和SVG图片放到同一个容器div里，给容器加一个类名，比如print-group：

  <div class="print-group">
    <div class="title">这是SVG标题</div>
    <svg>...</svg>
  </div>
  

• 添加针对打印场景的CSS样式，核心是用page-break-inside: avoid和break-inside: avoid属性，强制浏览器不在容器内部分页：

  @media print {
    .print-group {
      /* 兼容旧版浏览器 */
      page-break-inside: avoid;
      /* 现代浏览器标准属性 */
      break-inside: avoid;
      /* 可选：禁止在容器后强制分页，让后续内容正常排版 */
      page-break-after: auto;
    }
  }
  

注意事项 #

• 这个方法的前提是容器内的总内容高度不超过单页打印高度，如果内容本身就超出一页，浏览器还是会分页，只是不会在标题和SVG中间拆分。
• 确保print-group是块级元素，避免inline或inline-block布局导致属性失效。
• 不同浏览器对打印样式的支持略有差异，同时写page-break-inside和break-inside能覆盖更多场景。

内容的提问来源于stack exchange，提问作者nogood