break-inside
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019年1月.
* Some parts of this feature may have varying levels of support.
break-inside は CSS のプロパティで、生成されたボックスの途中で、ページ、段、領域を分割する方法を設定します。ボックスが生成されない場合は、このプロパティは無視されます。
試してみましょう
break-inside: auto;
break-inside: avoid;
<div>
<p>
このプロパティの効果は、文書が印刷される時、または印刷のプレビューが表示された時に確認できます。
</p>
<button id="print-btn">印刷プレビューを表示</button>
<div class="box-container">
<div class="box">プロパティの前のコンテンツ</div>
<div class="box" id="example-element">'break-inside' の付いたコンテンツ</div>
<div class="box">プロパティの後のコンテンツ</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();
});
構文
/* キーワード値 */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
/* グローバル値 */
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: revert-layer;
break-inside: unset;
分割位置になる可能性のある場所 (言い換えれば、要素の境界) は、3 つのプロパティに影響されます。前の要素の break-after の値、次の要素の break-before の値、包含要素の break-inside の値です。
分割が行われるかどうかを判断するためには、以下の規則が適用されます。
- 影響される 3 つの値のいずれかに分割を強制する値 (
always,left,right,page,column,regionのいずれか) がある場合、それが優先されます。そのような分割指定が複数ある場合は、フローの中で最も後に現れる要素の値が使用されます。つまり、break-beforeの値はbreak-afterの値より優先し、それは更にbreak-insideよりも優先します。 - 影響される 3 つの値の分割を抑止する値 (
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 |
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | ブロックレベル要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
break-inside =
auto |
avoid |
avoid-page |
avoid-column |
avoid-region
例
図が分割されるのを防ぐ
次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、一連の段落を column-width: 200px を使用して段組みレイアウトしたコンテナーを用意しています。また、画像とキャプションを含む <figure> もあります。
デフォルトでは、画像とキャプションの間に改段が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 break-inside: avoid を <figure> に設定しています。
HTML
<article>
<h1>大見出し</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>Firefox ロゴ ―― 地球に巻きつくキツネ</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
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;
}
結果
仕様書
| Specification |
|---|
| 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 |