最近在玩page-break這類屬性，像這樣做的話可以順利的將一、二頁分開，可是第三頁之後就沒有辦法成功換頁。
想請問為什麼？
<head>
<style>
@media print {
@page {
margin: 0;
size: A4;
}
}
.page-break{
display: block;
page-break-after: always;
position: relative;
}
</style>
</head>
<body>
<div class="row">
<div class="col-12">
<div>第一頁</div>
</div>
<div class="col-12">
<div class="page-break"></div>
<div>第二頁</div>
</div>
<div class="col-12">
<div class="page-break"></div>
<div>第三頁</div>
</div>
</div>
</body>
它的原理是什麼？
已邀請的邦友 {{ invite_list.length }}/5
給你一個提示。
將你的
<div class="page-break"></div>
想像成切開程式。
你就會發現其原理了。
你目前的確是只切2頁。
其第二組 page-break 。只是在第二頁再切一頁。但瀏覽器會不懂你目前的節構。
page-break屬性最好只用在根節點上。要不就得在同一節點內。
iThome鐵人賽
看影片追技術