試一試
break-inside: auto;
break-inside: avoid;
<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;
}
@media print {
#example-element {
height: 25cm;
}
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
語法
css
/* Keyword values */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
/* Global values */
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: revert-layer;
break-inside: unset;
每個可能的中斷點（換句話說，每個元素邊界）都會受到三個屬性的影響：前一個元素的 break-after 值、下一個元素的 break-before 值以及包含元素的 break-inside 值。
要確定是否必須進行中斷，應應用以下規則
- 如果三個相關值中的任何一個是強制中斷值（
always、left、right、page、column或region），則它具有優先權。如果有多個這樣的中斷，則使用流中最後出現的元素的值。因此，break-before值優先於break-after值，而break-after值又優先於break-inside值。 - 如果三個相關值中的任何一個是避免中斷值（
avoid、avoid-page、avoid-region或avoid-column），則在該點不會應用此類中斷。
強制中斷應用後，如果需要，可以新增軟中斷，但不能在解析為相應 avoid 值的元素邊界上新增。
值
auto-
允許在主框內插入任何中斷（頁面、列或區域），但不強制。
avoid-
避免在主框內插入任何中斷（頁面、列或區域）。
avoid-page-
避免在主框內出現任何分頁符。
avoid-column-
避免在主框內出現任何列中斷。
avoid-region-
避免在主框內出現任何區域中斷。
分頁別名
出於相容性原因，瀏覽器應將舊版 page-break-inside 屬性視為 break-inside 的別名。這確保了使用 page-break-inside 的網站能按設計繼續工作。一部分值應按如下方式進行別名：
| page-break-inside | break-inside |
|---|---|
auto |
auto |
avoid |
avoid |
正式定義
正式語法
break-inside =
auto |
avoid |
avoid-page |
avoid-column |
avoid-region
示例
避免在圖形內部斷開
在以下示例中，我們有一個容器，其中包含一個跨越所有列的 <h1>（透過使用 column-span: all 實現）和一系列使用 column-width: 200px 以多列布局的段落。我們還有一個包含影像和標題的 <figure>。
預設情況下，影像和其標題之間可能會出現斷開，這不是我們想要的。為了避免這種情況，我們已在 <figure> 上設定了 break-inside: avoid，這使得它們始終保持在一起。
HTML
html
<article>
<h1>Main heading</h1>
<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>
<figure>
<img
src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
<figcaption>The Firefox logo — fox wrapped around the world</figcaption>
</figure>
<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>
<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;
}
body {
width: 80%;
margin: 0 auto;
}
h1 {
font-size: 3rem;
letter-spacing: 2px;
column-span: all;
}
h1 + p {
margin-top: 0;
}
p {
line-height: 1.5;
break-after: column;
}
figure {
break-inside: avoid;
}
img {
max-width: 70%;
display: block;
margin: 0 auto;
}
figcaption {
font-style: italic;
font-size: 0.8rem;
width: 70%;
}
article {
column-width: 200px;
gap: 20px;
}
結果
規範
| 規範 |
|---|
| CSS Fragmentation Module Level 3 # break-within |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |
瀏覽器相容性
載入中…