是否可以在分页后重复内容？你能检测到分页吗？

Question

我有一个很大的网页，打印时通常需要多个分页符。然而，这意味着内容从父布局结构的其余部分分离出来，用户可能不明白它涉及到哪个问题。类似于下面的示例

当前行为

A 1 i   What is the capital of Peru?
    ii  What is the capital of Brazil?
    iii What is the capital of Equador?
  2 i   What is the population of France?
    ii  What is the population of Spain?
___________________________________________
    iii What is the population of Italy?

我想做的是在页面的开头重复问题编号，以便孤立的问题具有父级的参考。

期望的行为

A 1 i   What is the capital of Peru?
    ii  What is the capital of Brazil?
    iii What is the capital of Equador?
  2 i   What is the population of France?
    ii  What is the population of Spain?
___________________________________________
A 2 iii What is the population of Italy?

有什么方法可以用 CSS 做到这一点吗？我看不出如何使用 CSS 'page-break' 属性。否则也许 Javascript？顺便说一句，我将使用 wkhtmltopdf 将 html 转换为 pdf。

添加了一些示例代码。

td, th {
  vertical-align: top;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" typZe="text/css" href="css/main.css">
</head>
<body>

<table style="height: 202px; width: 557px;">
  <thead>
  <tr>
    <th>Main</th>
    <th>Sub</th>
    <th>Subsub</th>
    <th>Question</th>
    <th>Marks</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td rowspan="6">1</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 1</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 2</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 3</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 4</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 5</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 6</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="3">2</td>
    <td>a</td>
    <td>&nbsp;</td>
    <td>Here is a question 7</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 8</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 9</td>
    <td>
      <p>1.0</p>
    </td>
  </tr>
  <tr>
    <td rowspan="6">3</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 10</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 11</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>Here is a question 12
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 13</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 14</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 15</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">4</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 16</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 17</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 18</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 19</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 20</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 21</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">5</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 22</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 23</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 24</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 25</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 26</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 27</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="3">6</td>
    <td>a</td>
    <td>&nbsp;</td>
    <td>Here is a question 28</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 29</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 30</td>
    <td>
      <p>1.0</p>
    </td>
  </tr>
  <tr>
    <td rowspan="6">7</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 31</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 32</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>Here is a question 33</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 34</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 35</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 36</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">8</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 37</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 38</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 39</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 40</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 41</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 42</td>
    <td>1.0</td>
  </tr>
  </tbody>
</table>

</body>
</html>

Answer 1

下面的代码使用响应式网格系统和 CSS page-break-inside 属性.

基本上，我们将 page-break-inside 属性的值设置为 avoid，这意味着在同一页面上显示完整的项目并且不会在分页符。这意味着整个项目将显示在同一页面上。

在您的情况下，我们会将整个主要组围成一个 div 并分配 page-break-inside 属性。为了获得表格结构，我们将使用 CSS 网格系统、行和列。

现在，此代码不会在分页符上复制主 q.no、子 q.no。但是它会将同一主要 q.no 的所有问题都放在同一页上。

这段代码也可以通过for循环实现动态填充页面。

注意 print CSS class。它被分配到我们正在创建一个新的主要问题的行。如果这符合您的目的，我可以帮助您设计 for 循环，如果它看起来很复杂...

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto {
  position: relative;
  width: 100%;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="row print">
    <div class="col-1"> 1 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 2 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 3 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 4 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 5 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 6 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 7 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

通过在 CSS 中使用 page-break-after: avoid;，您可以告诉网站在打印指定对象时尽可能避免断页。或者，您可以将类设置为 page-break-after 或 page-break-before 以便打印机知道何时应该将东西推下或保持它们向上。我希望这会有所帮助，这是我用作参考的文档。

W3Schools：https://www.w3schools.com/cssref/pr_print_pageba.asp
MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

是否可以在分页后重复内容？你能检测到分页吗？

Is it possible to repeat content after a page-break? Can you detect a page-break?

html

css

pdf-generation

wkhtmltopdf

page-break