CSS break-inside 属性

定義と使用法

break-inside属性は、指定された要素内でページ切れ（page-break）、列切れ（column-break）または領域切れ（region-break）が発生するかどうかを規定します。

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

break-insideを使用することで、ブラウザに画像、コードスニペット、テーブル、リスト内部での中断を避けるように指示できます。

例

<img>要素内でのページ切れを避ける：

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

CSS文法

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

属性値

値 説明
auto デフォルト。要素内で自動的にページ切れ、列切れ、領域切れを行います。
avoid 要素内でページ、列、領域の切れを避ける。
avoid-column 要素内での列切れを避ける。
avoid-page 要素内でのページ切れを避ける。
avoid-region 要素内での分断を避ける。
initial この属性をデフォルト値に設定します。参照してください。 initial。
inherit この属性は親要素から継承されます。参照してください。 inherit。

技術的詳細

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

さらに多くの例

<table>、<ul>、<ol>要素内でのページ切れを避ける：

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

ブラウザのサポート

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

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