Question

好的，所以我做了很多研究，找不到任何东西。这就是我所拥有的。我需要创建一个打印按钮，打印视图需要在第一页之后有重复的标题。 AKA，第一页的标题与其他页面不同。截至目前，这是我所拥有的，但它在每个页面上重复，我无法制作自定义的第一页标题。任何帮助将不胜感激！

<!DOCTYPE html>
<html>
  <head>
    <style>
      .section {
        display: table;
        width: 100%;
      }
      .section > div {
        display: table-cell;
        overflow: hidden;
      }
      .section ~ .section > div:before {
        content: "";
        display: block;
        margin-bottom: -2.5em; /* inverse of header height */
      }
      .section > div > div {
        page-break-inside: avoid;
        display: inline-block;
        width: 100%;
        vertical-align: top;
      }
      .header {
        height: 2.5em; /* header must have a fixed height */
      }
      .content { /* this rule set just adds space between sections and is not required */
        margin-bottom: 1.25em;
      }
    </style>
  </head>
  <body>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

好的，另一个编辑。您应该能够使用body > .section > div:before覆盖第一个部分页面标题，并使用.section ~ .section > div:before覆盖所有其他页面标题。

小提琴更新。当我用chrome打印时，我得到了第一页标题＆＃39;在第一页上，在后续页面的第一部分之前，任何部分都没有任何内容。您松开了第一页标题上的边距，因此您可能需要调整间距。

Fiddle

body > .section > div:before {
  content: "First Page Header";
  display: block;
  margin-bottom: -2.5em;
}

.section ~ .section > div:before {
  content: "";
  display: block;
  margin-bottom: -2.5em; /* inverse of header height */
}

在第1页后打印重复标题

1 个答案: