Question

我正在尝试在动态生成的HTML页面上打印重复标题。

标题显示徽标，并使用CSS显示页码。

我的网站允许用户添加文本块或图片拼贴，并使用“添加文字”和“添加图片”按钮单独添加。

结果代码（有些）如下:( slim / HAML语法）

editable-section.ng-cloak(
      ng-repeat='section in story.sections'
      editable='false'
    ) 
      = render 'header'
      .show-content-wrapper
        = render 'sections/section'

这个内容的大小可能会有很大差异，所以我不想在每个之前放置一个'page-break-before：always;'规则...因为我可能希望它们在一个上面叠加多个保存纸张的页面，看起来并不傻。

我的问题是，在每个可编辑部分中，我有一个HTML标题我只想显示这是否是页面上的第一个可编辑部分。

所以问题是，我怎么才会在每个打印页面上显示第一个标题？我想这会产生一些影响：

@media only print {
  @page {
    header {
      display:none;
      &:first-of-type {
        display:block;
      }
    }
  }
}

但是，“您无法使用@page更改所有CSS属性。您只能更改文档的边距，孤立，寡妇和分页符。”

https://developer.mozilla.org/en-US/docs/Web/CSS/@page

思想？

Answer 1

你知道这个javascript吗？

document.getElementsByTagName('h1')[0]

使用括号，您可以选择第0个作为第一个元素的特定元素。

这有帮助吗？

如何使用CSS计算打印页面上的HTML元素？

1 个答案: