iT邦幫忙

0

關於CSS 列印分頁page-break屬性

最近在玩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>

它的原理是什麼?

1 個回答

1
㊣浩瀚星空㊣
iT邦超人 1 級 ‧ 2020-09-29 13:07:16
最佳解答

給你一個提示。
將你的

<div class="page-break"></div>

想像成切開程式。

你就會發現其原理了。

你目前的確是只切2頁。
其第二組 page-break 。只是在第二頁再切一頁。但瀏覽器會不懂你目前的節構。

page-break屬性最好只用在根節點上。要不就得在同一節點內。

chebub iT邦新手 5 級 ‧ 2020-10-06 18:23:45 檢舉

嗯!你說得對,也確實用在根節點上比較好。較清楚也好改動

我其實有想過是不是程式對半切,但總覺得程式有這麼笨嗎?一直懷疑

我要發表回答

立即登入回答