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

我有一个很大的网页，打印时经常需要多个分页符。然而，这意味着内容被从父布局结构的其余部分分离出来，用户可能不理解它重新分配到哪个问题。类似下面的例子

当前行为

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?

我想做的是在页面的末尾重复问题编号，这样孤立的问题就有了家长的参考

期望的行为

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的“分页符”属性。否则可能是Javascript？顺便说一下，我将使用wkhtmltopdf将html转换为pdf

添加了一些示例代码

td，th{
垂直对齐：顶部；
}

标题
主要
附属的
亚潜艇
问题:
标志
1.
A.
我
这里有一个问题1
1
二,
这里有一个问题2
1
三,
这里有一个问题3

1
B
我
这里有一个问题4
1
二,
这里有一个问题5
1
C
这里有一个问题6
1
2.
A.
这里有一个问题7
1
B
我
这里有一个问题8
1
二,
这里有一个问题9
1.0

3.
A.
我
这里有一个问题10
1
二,
这里有一个问题11
1
三,
这里有一个问题12
1
B
我
这里有一个问题13
1
二,
这里有一个问题14
1
C
这里有一个问题15
1
4.
A.
我
这里有一个问题16
1
二,
这里有一个问题17
1
三,
这里有一个问题18

1
B
我
这里有一个问题19
1
二,
这里有一个问题20
1
C
这里有一个问题21
1
5.
A.
我
这里有一个问题22
1
二,
这里有一个问题23
1
三,
这里有一个问题24

1
B
我
这里有一个问题25
1
二,
这里有一个问题26
1
C
这里有一个问题27
1
6.
A.
这里有一个问题28
1
B
我
这里有一个问题29
1
二,
这里有一个问题30
1.0

7.
A.
我
这里有一个问题31
1
二,
这里有一个问题32
1
三,
这里有一个问题33
1
B
我
这里有一个问题34
1
二,
这里有一个问题35
1
C
这里有一个问题36
1
8.
A.
我
这里有一个问题37
1
二,
这里有一个问题38
1
三,
这里有一个问题39

1
B
我
这里有一个问题40
1
二,
这里有一个问题41
1
C
这里有一个问题42
1

下面的代码使用响应网格系统和CSS

内部分页符

属性

基本上，我们将

分页符inside

属性的值设置为

avoid

，这意味着在同一页上显示完整的项目，而不在分页符时将其打断。这意味着整个项目将显示在同一页上

在您的情况下，我们将把整个主组包含在一个div中，并在属性中指定

分页符。为了得到一个表格结构，我们将使用CSS网格系统、行和列

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

该代码还可以通过for循环实现，用于动态填充页面

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


.row{
显示：-ms flexbox；
显示器：flex；
-ms-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 auto{
位置：相对位置；
宽度：100%；
}
上校{
-ms flex首选尺寸：0；
弹性基准：0；
-ms-flex阳性1例；
柔性生长：1；
最大宽度：100%；
}
.col auto{
-ms-flex:0自动；
flex:0自动；
宽度：自动；
最大宽度：100%；
}
.col-1{
-ms-flex:08333%；
弹性：0.08.333333%；
最大宽度：8.333333%；
}
.col-2{
-ms-flex:0116.666667%；
弹性：016.666667%；
最大宽度：16.666667%；
}
上校3{
-ms-flex:025%；
弹性：0.25%；
最大宽度：25%；
}
.col-4{
-ms-flex:033.333%；
弹性：0.33.333333%；
最大宽度：33.333%；
}
上校5{
-ms-flex:041.666667%；
弹性：041.666667%；
最大宽度：41.666667%；
}
.col-6{
-ms-flex:050%；
弹性：0.50%；
最大宽度：50%；
}
上校7{
-ms-flex:058.333333%；
弹性：058.333333%；
最大宽度：58.333%；
}
.col-8{
-ms-flex:0666.6667%；
弹性：0.66.666.7%；
最大宽度：66.666.7%；
}
.col-9{
-ms-flex:075%；
弹性：0.75%；
最大宽度：75%；
}
上校10{
-ms-flex:083.333%；
弹性：0.83.333333%；
最大宽度：83.333%；
}
上校11{
-ms-flex:091.666667%；
弹性：091.666667%；
最大宽度：91.666667%；
}
上校12{
-ms-flex:01100%；
弹性：0.100%；
最大宽度：100%；
}
@媒体印刷品{
.打印{
内部分页符：避免；
}
}

标题
1.
A.
我
这是问题1
1
二,
这是问题2
1