Menu
html printing form is designed using absolutely positioned elements. How to force page break between some lines.
I tried code below but page1 and page2 appers in first page and empty pages are at end if printed from browser. How to force page1 and page2 to appear in separate pages ?
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
}
@page {
visibility: hidden;
margin: 0 15px;
height: auto;
}
.break {
page-break-before: always;
}
</style>
</head>
<body>
<div class='break'></div>
<div style='top:11.58cm;'>page1</div>
<div class='break'></div>
<div style='top:13.35cm;'>page2</div>
</body>
</html>
I also tried to change second page contents to
<div class='break' style='top:1cm;'>page2</div>
But both lines are still printed in first page.
707
A little late to the game, but this might be useful for future reference:
.break {
page-break-after: always;
position: relative;
}
.absolute {
position: absolute;
}<div class='break'>
<div class="absolute" style='top:11.58cm;'>page1</div>
</div>
<div class='break'>
<div class="absolute" style='top:13.35cm;'>page2</div>
</div>Working JSfiddle
To test, select the text in the result and print.
134
answered Sep 21 '22 11:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With