CSS break-before 속성

항상 <h1> 요소 앞에 페이지 나누기를 삽입합니다.

@media print {
h1 {
break-before: always;
}
}

정의 및 사용

속성 은 break-before지정된 요소보다 먼저 페이지 나누기, 열 나누기 또는 영역 나누기가 발생해야 하는지 여부를 지정합니다.

속성 은 break-beforeCSS2 속성을 확장합니다.page-break-before

를 사용 break-before하면 요소가 속성을 적용하기 전에 페이지, 열 또는 영역을 나누도록 브라우저에 지시하거나 break-before 요소가 두 페이지에 걸쳐 분할 및 확장되지 않도록 할 수 있습니다.

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
break-before	50.0	10.0	65.0	10.0	37.0

Value	Description
auto	Default. Automatic page/column/region break before the element
all	Always insert a page-break right before the principal box
always	Always insert a page-break before the element
avoid	Avoid a page/column/region break before the element
avoid-column	Avoid a column-break before the element
avoid-page	Avoid a page-break before the element
avoid-region	Avoid a region-break before the element
column	Always insert a column-break before the element
left	Insert one or two page-breaks before the element so that the next page is formatted as a left page
page	Always insert a page-break before the element
recto	Insert one or two page-breaks before the principal box so that the next page is formatted as a recto page
region	Always insert a region-break before the element
right	Insert one or two page-breaks before the element so that the next page is formatted as a right page
verso	Insert one or two page-breaks before the principal box so that the next page is formatted as a verso page
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

모든 새 장이 인쇄될 때 올바른 페이지(예: 책)에서 시작되도록 하려면 모든 <h1> 요소에 대해 break-before: right를 사용할 수 있습니다.

@media print {
h1 {
break-before: right;
}
}

항상 영역에서 <ul> 요소 앞에 영역 나누기를 삽입합니다.

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