溢出時將內容移動到另一個div

Question

因此，我正在嘗試構建一個網站，讓用戶可以下載打印輸出的PDF文件。我在另一個線程中建議創建一個「新」頁面，在其中放置我想要的信息，然後從中打印出「Print to 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更小，它總是適合在頁面上。

Answer 2

很抱歉之前的答案： 您可以使用@media print類的CSS和HTML動態將其添加到您。 https://jsfiddle.net/s7fjLt8e/6/

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

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