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

kxe2p93d  于 2023-03-20  发布在  其他
关注(0)|答案(2)|浏览(114)

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

当前行为

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的方式。
添加了一些示例代码。
一个二个一个一个

css

2条答案

按热度按时间
o7jaxewo

o7jaxewo1#

下面的代码使用响应网格系统和CSS page-break-inside属性。
基本上，我们将page-break-inside属性的值设置为avoid，这意味着在同一页上显示整个项目，并且在分页符处不对其进行分隔，这意味着整个项目将显示在同一页上。
在您的例子中，我们将整个主组封装到一个div中，并分配page-break-inside属性。为了得到一个表格结构，我们将使用CSS网格系统、行和列。
现在，这段代码没有复制主q.no，在一个分页上的子q.no，但是它把同一个主q.no的所有问题都放在同一页上。
这段代码也可以通过for循环来实现，以便动态填充页面。
注意print CSS类。它被分配到我们正在创建一个新的主问题的行。如果这符合你的目的，我可以帮助你设计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>
赞(0）分享  回复(0）举报  2023-03-20
k0pti3hp

k0pti3hp2#

通过在CSS中使用page-break-after: avoid;，你可以告诉网站在打印指定对象时尽可能避免断页。或者，你可以用page-break-after或page-break-before设置类，这样打印机就知道什么时候应该把东西推下来或保持在上面。我希望这能有所帮助，这里是我用来参考的文档。
W3学校：https://www.w3schools.com/cssref/pr_print_pageba.asp
MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

赞(0）分享  回复(0）举报  2023-03-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com