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|thừa kế;

속성 값

값 설명
자동 기본. 요소 내에서 자동으로 페이지 분할, 분열, 분할을 수행합니다。
avoid 요소 내에서 페이지, 열, 영역 분할을 피하십시오。
avoid-column 요소 내에서 분열을 피하십시오。
avoid-page 요소 내에서 페이지 분할을 피하십시오。
avoid-region 요소 내에서 분할을 피하십시오。
초기 값 이 속성을 기본 값으로 설정합니다. 참조하십시오： 초기 값。
thừa kế 이 속성을 부모 요소에서 thừa kế합니다. 참조하십시오： thừa kế。

기술 세부 사항

기본 값： 자동
thừa kế： 아니요
애니메이션 제작： 지원하지 않습니다. 참조하십시오：애니메이션 관련 속성。
버전： CSS3
JavaScript 문법： object.style.breakInside="always"

더 많은 예제

<table>、<ul>、<ol> 요소 내에서 페이지 분할을 피하십시오：

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

브라우저 지원

표中的 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 기재했습니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
50.0 10.0 65.0 10.0 37.0