1. Web
  2. CSS
  3. break-after

break-after

Baseline 廣泛可用 *

此功能已成熟，並可在多種裝置和瀏覽器版本上使用。自 ⁨2019 年 1 月⁩起，它已在所有瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

break-after CSS 屬性設定在生成框之後，頁面、列或區域中斷應如何表現。如果沒有生成框，則忽略該屬性。

試一試

break-after: auto;

break-after: page;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'break-after'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

語法

css
/* Generic break values */
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;

/* Page break values */
break-after: avoid-page;
break-after: page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;

/* Column break values */
break-after: avoid-column;
break-after: column;

/* Region break values */
break-after: avoid-region;
break-after: region;

/* Global values */
break-after: inherit;
break-after: initial;
break-after: revert;
break-after: revert-layer;
break-after: unset;

每個可能的斷點（換句話說，每個元素邊界）都受三個屬性影響：前一個元素的 break-after 值，下一個元素的 break-before 值，以及包含元素的 break-inside 值。

要確定是否必須進行中斷，應應用以下規則

  1. 如果三個相關值中的任何一個是強制中斷值（always、left、right、page、column 或 region），則它具有優先順序。如果有多個這樣的中斷，則選擇流中最新出現的元素的（即，break-before 值優先於 break-after 值，而 break-after 值本身優先於 break-inside 值）。
  2. 如果三個相關值中的任何一個是避免中斷值（avoid、avoid-page、avoid-region 或 avoid-column），則在該點不會應用此類中斷。

強制中斷應用後，如果需要，可以新增軟中斷，但不能在解析為相應 avoid 值的元素邊界上新增。

值

通用中斷值

auto

允許但不強制在主框之後插入任何中斷（頁面、列或區域）。

avoid

避免在主框之後插入任何中斷（頁面、列或區域）。

always

強制在主框之後進行分頁。此中斷的型別是緊密包含的碎片化上下文的型別。如果我們在多列容器內部，它將強制列中斷，如果在分頁媒體內部（但不在多列容器內部），則強制分頁。

all

強制在主框之後進行分頁。透過所有可能的碎片化上下文進行中斷。因此，在多列容器內部（多列容器又在頁面容器內部）的中斷將強制列中斷和分頁。

分頁值

avoid-page

避免在主框之後出現任何分頁符。

page

強制在主框之後進行分頁。

left

強制在主框之後進行一到兩個分頁符，以使下一頁成為左頁。它是在書籍書脊左側或雙面列印頁面背面放置的頁面。

強制在主框之後進行一到兩個分頁符，以使下一頁成為右頁。它是在書籍書脊右側或雙面列印頁面正面放置的頁面。

recto

強制在主框之後進行一到兩個分頁符，以使下一頁成為正面頁。（正面頁在從左到右的版面中是右頁，在從右到左的版面中是左頁。）

verso

強制在主框之後進行一到兩個分頁符，以使下一頁成為背面頁。（背面頁在從左到右的版面中是左頁，在從右到左的版面中是右頁。）

列中斷值

avoid-column

避免在主框之後出現任何列中斷。

column

強制在主框之後進行列中斷。

區域中斷值

avoid-region

避免在主框之後出現任何區域中斷。

region

強制在主框之後進行區域中斷。

分頁別名

出於相容性原因，瀏覽器應將舊的 page-break-after 屬性視為 break-after 的別名。這確保使用 page-break-after 的網站繼續按設計工作。值的子集應按如下方式進行別名

page-break-after break-after
auto auto
left left
right right
avoid avoid
always page

注意：page-break-* 的 always 值被瀏覽器實現為分頁符，而不是列中斷。因此，別名是 page，而不是 Level 4 規範中的 always 值。

正式定義

初始值auto
應用於塊級元素
繼承性否
計算值同指定值
動畫型別離散

正式語法

break-after = 
  auto          |
  avoid         |
  always        |
  all           |
  avoid-page    |
  page          |
  left          |
  right         |
  recto         |
  verso         |
  avoid-column  |
  column        |
  avoid-region  |
  region

示例

整齊地分成列

在以下示例中，我們有一個容器，其中包含一個跨所有列的 <h1>（使用 column-span: all 實現）和一系列使用 column-width: 200px 以多列布局的 <h2> 和段落。

預設情況下，子標題和段落的佈局相當混亂，因為標題不在統一的位置。但是，我們對 <p> 元素使用了 break-after: column，以強制每個元素之後進行列中斷，這意味著您最終會在每列的頂部整齊地放置一個 <h2>。

HTML

html
<article>
  <h1>Main heading</h1>

  <h2>Subheading</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <h2>Subheading</h2>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <h2>Subheading</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>Subheading</h2>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

CSS

css
html {
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
}

p {
  line-height: 1.5;
  break-after: column;
}

article {
  column-width: 200px;
  gap: 20px;
}

結果

規範

規範
CSS Fragmentation Module Level 3
# break-between
CSS Regions Module Level 1
# region-flow-break
CSS Multi-column Layout Module Level 1
# break-before-break-after-break-inside

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者最後修改於。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.