javascript - 溢出时将内容移动到另一个 div

Question

所以我正在尝试建立一个网站，人们可以在该网站上下载 PDF 文件进行打印。我在另一个线程中被建议创建一个"new"页面，在其中放置我想要的信息，然后从中创建一个“打印为 PDF”，因为这是将内容转换为 PDF 的最简单方法。

所以我制作了一个页面，其中的网格正好是 A4 纸的宽度和高度。因此，如果打印出来，内容应该完全适合。

但是，我现在的问题是，网格内的内容会根据人们输入的内容而变化。

所以现在我可能遇到以下情况:

CSS:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 21cm;
        height: 29.7cm;
        border: 1px red solid;
        align-content: start;
        grid-row-gap: 10px;
        background: black;
    }

    .teams {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        "teamNumber roundScore";
        background: #ffffff;
        margin: 10px;
        padding: 10px;
        border-radius: 5px;     
    }

    .teamMember {
        border-bottom: 2px #474340 solid;
        padding: 5px 0px 5px 5px;
        margin: 5px;
    }

    .teamNumber {
        grid-area: teamNumber;
        text-align: left;
        grid-column: 1 / -1;
        padding-left: 5px;
        justify-self: start;
    }
</style>

HTML:

<div class="grid">
    <div class="teams">
        <p class="teamNumber">Team 1</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 2</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 3</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
        <div class="teamMember">11.</div>
        <div class="teamMember">12.</div>
        <div class="teamMember">13.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 4</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 5</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
</div>

JSFiddle: https://jsfiddle.net/kfeer7f8/

所以在进入这个页面之前，有人告诉我的系统/网站应该有 5 个团队，50 个人，然后将这些人分成 5 个团队。正如您所看到的结果，至少从我在这个例子中使用的格式来看，一切都按预期排列，但是，最后最后一个团队溢出了 A4 网格的尺寸。 显然这是随机的。有时可能只有 2 个团队和 20 个人就很容易适应那个网格。但有时它甚至可能远不止于此，使溢出变得更糟。

所以我的问题是:是否有某种方式，通过 javascript/jquery 或其他任何方式，如果它导致前一个网格溢出，我可以告诉它将团队放置/继续到另一个网格/A4 纸上？

Answer 1

根据我的理解。您只需要确保所有网格都适合 A4 大小的纸张并且没有网格损坏。

您可以使用打印媒体查询和分页符来做到这一点: https://www.w3schools.com/cssref/pr_print_pagebi.asp

使用:

  @media print {
          .teams { 
                page-break-inside: avoid;
          }
    }

然后，无论 .team div 有多大，只要它小于 A4，它就会始终适合页面。