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

因此，我正在尝试建立一个网站，人们可以下载PDF文件进行打印输出。在另一个帖子中，有人建议我创建一个“新”页面，在其中放置我想要的信息，然后从中打印成“打印成PDF”，因为这是将内容转换成PDF的最简单方法

因此，我制作了一个网格页面，其宽度和高度与A4纸完全相同。因此，如果打印，内容应该完全适合

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

所以现在我可能有以下情况：

CSS:

* {
保证金：0；
填充：0；
}
.电网{
显示：网格；
网格模板列：1fr；
宽度：21cm；
身高：29.7厘米；
边框：1px红色实心；
对齐内容：开始；
网格行间距：10px；
背景：黑色；
}
.团队{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板区域：
“组号总分”；
背景：#ffffff；
利润率：10px；
填充：10px；
边界半径：5px；
}
.团队成员{
边框底部：2px#474340实心；
填充：5px 0px 5px 5px；
保证金：5px；
}
.组号{
网格区域：团队编号；
文本对齐：左对齐；
网格柱：1/-1；
左侧填充：5px；
自我辩护：开始；
}

HTML:

第一队
1.
2.
3.
4.
5.
6.
7.
第二队

1.
2.
3.
4.
5.
6.
7.
8.
9
10
第三队

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
第四队

1.
2.
3.
4.
5.
6.
7.
8.
9
10
第五队

1.
2.
3.
4.
5.
6.
7.
8.
9
10

JSFiddle：

因此，在进入本页面之前，有人告诉我的系统/网站，应该有5个团队，50人，然后将这些人分成5个团队。正如您所看到的结果，至少从我在本例中使用的格式来看，所有内容都按其应有的方式排列，但是最后一个团队溢出了A4网格的尺寸。 显然这是随机的。有时可能只有2支球队和20个人可以很容易地适应这个网格。但有时甚至可能比这更严重，使溢出更严重

---

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

对不起，前面的回答是： 您可以将

@media print

类用于css，并将其动态添加到html中。

用于动态添加的Javascript代码

var teamArray = []
$('.teamMember').each(function(){
    teamArray.push($(this));
});
var i = 30;
while(teamArray[i]){
    teamArray[i].parent().after("<div class='pageBreakClass'>Page Breaks Here</div>");
  i += 30;
}

var teamArray=[]
$（'.teamMember'）。每个（函数（）{
teamArray.push（$（this））；
});
var i=30；
while（teamArray[i]）{
teamArray[i].parent（）.after（“此处分页符”）；
i+=30；
}
根据我的理解

。您只需要确保所有网格都适合A4大小的纸张，并且没有网格被破坏

您可以使用打印介质查询和分页符执行此操作：

使用：

---

然后，不管

.team

div有多大，只要它小于A4，它就始终可以放在页面上

请注意，原始问题中的分组不一定是每个团队10人。。。你的解决方案需要更具活力，我不确定我是否理解这一点。就我在你的小提琴中所看到的，所有团队现在都有10名成员（尽管一个团队应该只有7名成员，另一个团队应该有13名成员），其中一些团队的排序甚至非常奇怪。此外，据我所知，如果有更多的团队，溢出仍然会发生。@Patrick Roberts对不起，我可能会误解这个问题that@PatrickRoberts我更新了我的答案很抱歉。当我读到“应该有5个团队，50个人，然后将这些人分成5个团队”时，我误解了你的意思。我想您在对它们进行分组时遇到了问题。获取

A4

纸张的默认高度，然后使用

jQuery

，检查

teams

类容器的偏移值并相应地移动它们。

<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>

@media print {
    .pageBreakClass{
      page-break-before: always;
    }
  }

var teamArray = []
$('.teamMember').each(function(){
    teamArray.push($(this));
});
var i = 30;
while(teamArray[i]){
    teamArray[i].parent().after("<div class='pageBreakClass'>Page Breaks Here</div>");
  i += 30;
}

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