1. Web
  2. CSS
  3. break-before

break-before

Baseline 廣泛可用 *

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

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

break-before CSS 屬性用於設定在生成的盒模型之前，分頁、分欄或區域中斷的行為。如果沒有生成的盒模型，則該屬性將被忽略。

試一試

break-before: auto;

break-before: 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-before'</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-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

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

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

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

/* Global values */
break-before: inherit;
break-before: initial;
break-before: revert;
break-before: revert-layer;
break-before: 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-before 屬性視為 break-before 的別名。這確保了使用 page-break-before 的網站能夠按設計繼續工作。一部分值應按以下方式進行別名設定：

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

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

正式定義

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

正式語法

break-before = 
  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> 和段落。

預設情況下，子標題和段落的佈局相當混亂，因為標題沒有在統一的位置。然而，我們對 <h2> 元素使用了 break-before: column 來強制在每個 <h2> 之前進行分欄，這意味著每個 <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;
  break-before: column;
}

p {
  line-height: 1.5;
}

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.