搜尋

列印換頁 break-after、break-before、break-inside

通常在列印文件時,會根據版面配置適時地將某些段落「分頁」,然而對於網頁來說往往會忽略列印的分頁設置 ( 直接列印網頁機會較少 ),但透過 CSS 的列印換頁相關樣式屬性 break-before、break-after、break-inside,就能精準控制元素在換頁時要位於哪個頁面,這篇教學會介紹這些樣式屬性用法。

快速導覽:

CSS 教學 - 列印換頁 break-after、break-before、break-inside

break-before、break-after 位於前頁或後頁

break-beforebreak-after 樣式屬性可以設定元素在「列印時的位置在前頁或後頁」,前一頁的定義是原本的頁面,後頁表示會換頁到下一頁 ( 或下兩頁 ),這兩個樣式沒有繼承特性,主要有下列屬性值 ( 目前屬性值的表現結果都只有自動分頁與強制換頁的效果,未來瀏覽器支援後才可能會有更多列印功能 ):

屬性值 break-before break-after
auto 預設值,自動分頁 預設值,自動分頁
always 自動分頁 自動分頁
avoid 自動分頁 自動分頁
all 自動分頁 自動分頁
page 換頁到下一頁 位於原本頁面,後方元素換頁到下一頁
left 換頁到下一頁 位於原本頁面,後方元素換頁到下一頁
right 換頁到下一頁 位於原本頁面,後方元素換頁到下一頁

下方範例開啟並列印後,可以自行修改樣式屬性與屬性值,就能看到設定這些屬性值的差異 ( 下方範例為 break-after: page; )。

線上展示:https://codepen.io/oxxo/pen/PwYdRKr

<!-- HTML 程式碼 -->
<div>apple</div>
<div>banana</div>
<div class="a">orange</div>
<div>oxxo</div>
<div>papaya</div>
<div>coconut</div>
<div>pear</div>
<div>cucumber</div>

<!-- CSS 程式碼 -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    -webkit-print-color-adjust: exact; /* 列印時會出現背景色 */
    color-adjust: exact;               /* 列印時會出現背景色 */
    box-sizing: border-box;
    border: 5px dashed #a00;
    width: 90%;
    height: 140px;
    font-size: 50px;
    margin: 10px;
  }
  .a {
    background: pink;
    break-after: page;
  }
</style>

CSS 教學 - 容器陰影 box-shadow - break-before、break-after 位於前頁或後頁

break-inside 是否跨頁

break-inside 樣式屬性可以設定元素在自動分頁時「是否可以跨頁」,如果不能跨頁,就會自動分頁到下一頁 ( 但如果單一元素長度過長在下一頁仍然會自動分成兩頁 ),這個樣式沒有繼承特性,主要有下列屬性值:

屬性值 說明
auto 預設值,自動分頁。
avoid 避免跨頁,出現跨頁情形會自動到下一頁。
avoid-page 避免跨頁,忽略內容分頁符號 ( 幾乎等同 avoid )。
avoid-column 避免跨頁,忽略內容分欄 ( 幾乎等同 avoid )。
avoid-region 避免跨頁,忽略內容區域中斷 ( 幾乎等同 avoid )。

下方範例開啟並列印後,可以自行修改樣式屬性與屬性值,就能看到設定這些屬性值的差異 ( 下方範例為 break-inside: avoid; )。

線上展示:https://codepen.io/oxxo/pen/vEBzRaP

<!-- HTML 程式碼 -->
<div>apple</div>
<div>banana</div>
<div class="a">orange</div>
<div>oxxo</div>
<div>papaya</div>
<div>coconut</div>
<div>pear</div>
<div>cucumber</div>

<!-- CSS 程式碼 -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    -webkit-print-color-adjust: exact; /* 列印時會出現背景色 */
    color-adjust: exact;               /* 列印時會出現背景色 */
    box-sizing: border-box;
    border: 5px dashed #a00;
    width: 90%;
    height: 140px;
    font-size: 50px;
    margin: 10px;
  }
  .a {
    background: pink;
    break-inside: avoid;
    height: 1000px;
  }
</style>

CSS 教學 - 容器陰影 box-shadow - break-inside 是否跨頁

小結

CSS 負責控制列印跨頁的 break-beforebreak-afterbreak-inside 的使用頻率很低,因列印網頁不單純只有跨頁,還有許多眉眉角角的問題需要處理,但如果有列印網頁需求,加入這幾個樣式就讓網頁排版更佳美觀。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 位置名稱與時間單位

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties )

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視 3D 正多面體

視窗與使用者行為

捲軸樣式 ( scrollbar ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 漸層色的轉場與動畫 電子時鐘數字 不規則形狀動畫