底部有部分水平线的页脚

Question

我正在使用 Pressbooks（出版一本书）。在 CSS 中，我试图将脚注上方的行从整行变为部分行。

我的 CSS 技能有限，所以我做的不多。

.footnote {
   padding-left: 0;
   margin-left: 0;
   font-family: 'Lora', serif;
   font-size: 0.8888888889rem;
   font-weight: normal;
   font-style: normal;
   letter-spacing: normal;
   word-spacing: normal;
   color: initial;
   line-height: 1.5555555556em;
   text-align: left;
   text-indent: 0;
   text-transform: none;
   counter-increment: footnote;
   footnote-style-position: outside; }

.endnote::footnote-call, .footnote::footnote-call {
   font-size: 0.8em;
   line-height: 0.5em;
   vertical-align: top; }

p {
   prince-footnote-policy: keep-with-line; }

@page {
 @footnotes {
   border-top: 1px solid #aaa;
   margin-bottom: 10px;
   margin-top: 10px;
   padding-bottom: 0.3em;
   padding-top: 0.3em; } }

我想要正文和脚注之间的部分线条，但这给出了完整的线条。有什么建议吗？

Answer 1

为此尝试使用 border-clip：

@page {
  @footnotes {
    border-top: 1px solid #aaa;
    border-clip: 3in;
    padding: 0.3em 0;
    margin: 10px 0;
  }
}

不过 Prince 似乎不支持 border-clip 的百分比值。参见 here。

以上屏幕截图的完整代码示例。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .footnote {
        display: prince-footnote;
        font-family: 'Lora', serif;
        font-size: 0.8888888889rem;
        font-weight: normal;
        font-style: normal;
        letter-spacing: normal;
        word-spacing: normal;
        color: initial;
        line-height: 1.5555555556em;
        text-align: left;
        text-indent: 0;
        text-transform: none;
        counter-increment: footnote;
        footnote-style-position: outside;
      }

      @page {
        @footnotes {
          border-top: 1px solid #aaa;
          border-clip: 3in;
          padding: 0.3em 0;
          margin: 10px 0;
        }
      }
    </style>
  </head>
  <body>
    <h1>This is a page title</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <span class="footnote">This is my footnote.</span>
    </p>
  </body>
</html>

底部有部分水平线的页脚

Footer at bottom with partial horizontal line

css

footer