CSS break-after 属性

定義と使用法

break-after属性は、指定された要素の後にページ（page-break）、列（column-break）またはエリア（region-break）の分断が発生するかどうかを定義します。

break-after属性はCSS2のpage-break-after属性を拡張しています。

break-afterを使用することで、ブラウザにbreak-after属性が適用された要素の後にページ、列、またはエリアを分断するか、要素を分割して2つのページにわたることを避けるよう指示できます。

例

要素 <footer> の前に常にページ記号を挿入します。

@media print {
  footer {
    break-after: always;
  }
}

CSS 言語

break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

属性値

値 説明
auto デフォルト。要素の後ろに自動的にページ、分列、分離を行います。
all 本文のフレームの後ろにすぐにページ記号を挿入します。
always 要素の後ろに常にページ記号を挿入します。
avoid 要素の後ろにページ、列、エリアの中断を避けます。
avoid-column 要素の後ろに分列を避けます。
avoid-page 要素の後ろにページを避けます。
avoid-region 要素の後ろに分離を避けます。
column 要素の後ろに常に分列記号を挿入します。
left 要素の後ろに一つまたは二つのページ記号を挿入して、次のページを左表紙としてフォーマットします。
page 要素の後ろに常にページ記号を挿入します。
recto 本文のフレームの後ろに一つまたは二つのページ記号を挿入して、次のページを表紙としてフォーマットします。
region 要素の後ろに常に分離記号を挿入します。
right 要素の後ろに一つまたは二つのページ記号を挿入して、次のページを右表紙としてフォーマットします。
verso 本文のフレームの後ろに一つまたは二つのページ記号を挿入して、次のページを背表紙としてフォーマットします。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 言語： object.style.breakAfter="always"

さらに例

例

id が "toc" の要素の後に常にページ記号を挿入します：

@media print {
  #toc {
    break-after: always;
  }
}

例

特定のエリア内の <ul> 要素の後に常に分離記号を挿入します：

.region ul {
    break-after: region;
  }
}

ブラウザのサポート

このテーブルの数字には、この属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0