I am faced with an issue on my HTML page where multiple angular material cards are being displayed:
...
<mat-card class="mat-card-98">
<mat-card-header>
<mat-card-title>THIS IS MY TITLE</mat-card-title>
</mat-card-header>
<mat-card-content>
THIS IS MY CONTENT
</mat-card-content>
</mat-card>
...
While converting this webpage to a PDF using the HTML2PDF library, I noticed that the content inside the <mat-card-content> gets cut off when transitioning to a new page in the PDF.
Is there a way to implement CSS page breaks to avoid this issue? Instead of splitting the content, it should move to a new page and display the full content there.
I have attempted to use the following CSS code, but it did not resolve the problem:
.mat-card {
display: block;
margin-bottom: 16px;
break-before: avoid
}