试一试
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 |
浏览器兼容性
加载中…