强制打印不会自动破坏属性

Question

我正在 Angular 中创建一个页面，该页面会打印一些存储在变量中的数据。

我遵循了这个指南：https://medium.com/@Idan_Co/angular-print-service-290651c721f9

我设置的内容是作为一个大的 HTML 字符串从 API 接收的，我将其设置为内部 HTML 到一个 div 中。

我遇到的问题是我的内容不会自动分页，即使使用属性：

page-break-inside: auto;

如您所见：

我想在每一页上都有一个页眉、页脚和从前一页“破坏”的内容。内容好像被隐藏了，只显示第一页。

这是我的布局页面：

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <router-outlet></router-outlet>
</div>

<div class="footer">
  <h2 class="footer-title">Footer</h2>
</div>

这是我的内容页面

<div [innerHTML]="content"></div>

有人知道我可以如何强制页面中断吗？

谢谢！

Answer 1

通过添加我的 styles.css 来修复它：

  * { overflow: visible !important; min-height: max-content !important; max-height: max-content !important; }