HTML打印页面分页控制的CSSpageBreak属性格式用法

<style>
  .chapter {
    page-break-before: always; /* 每个章节前分页 */
  }
  .no-break {
    page-break-inside: avoid; /* 避免在该元素内部分页 */
  }
  h2, table, img {
    page-break-after: avoid;   /* 标题、表格、图片后不断页 */
    page-break-before: avoid;  /* 前面也不宜断页 */
  }
</style>
<p><div class="chapter">
<h1>第一章</h1>
<p>这里是内容……</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11106">
                            <img src="https://img.php.cn/upload/webcode/000/000/019/176498820779736.png" alt="逍遥内容管理系统(Carefree CMS)1.3.0">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11106">逍遥内容管理系统(Carefree CMS)1.3.0</a>
                            <p>系统简介逍遥内容管理系统（CarefreeCMS）是一款功能强大、易于使用的内容管理平台，采用前后端分离架构，支持静态页面生成，适用于个人博客、企业网站、新闻媒体等各类内容发布场景。核心特性1、模板套装系统 - 支持多套模板自由切换，快速定制网站风格2、静态页面生成 - 一键生成纯静态HTML页面，访问速度快，SEO友好3、文章管理 - 支持富文本编辑、草稿保存、文章属性标记、自动提取SEO4、全</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="逍遥内容管理系统(Carefree CMS)1.3.0">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11106" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="逍遥内容管理系统(Carefree CMS)1.3.0">
                        </a>
                    </div>
                
</div>
<div class="chapter">
<h1>第二章</h1>
<p>更多内容……</p>
</div></p>

.chapter {
  break-before: page;        /* 等同于 page-break-before: always */
}
.no-split {
  break-inside: avoid;       /* 等同于 page-break-inside: avoid */
}

.avoid-inside {
  page-break-inside: avoid;
  break-inside: avoid;
}