分割容器前面栏或页面 | break-before
break-before
break-before
CSS属性定义页,列或区域应如何生成框之前的行为。如果没有生成的框,则忽略该属性。
/* Generic break values */
break-before: auto;
break-before: avoid;
/* Page break values */
break-before: avoid-page;
break-before: page;
break-before: always;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;
/* Column break values */
break-before: avoid-column;
break-before: column;
/* Region break values */
break-before: avoid-region;
break-before: region;
/* Global values */
break-before: inherit;
break-before: initial;
break-before: unset;
每个可能的断点(换句话说,每个元素边界)都受到三个属性的影响:break-after
前一个元素的break-before
值,下一个元素的break-inside
值以及包含元素的值。
若要确定是否必须中断,请应用下列规则:
- 如果这三个值是
被迫中断值
(always
,left
,right
,page
,column
,或region
),它具有优先权。如果不止一个是这样一个中断,那么在流中出现最新的那个元素(即,break-before
优先于break-after
优先于break-inside
)。
- 如果任何三种有关值是
避免中断值
(avoid
,avoid-page
,avoid-region
,avoid-column
),在该点处将不会有任何操作。
一旦应用了强制中断,可以在需要时添加软断点,但不能添加在相应的避免值中解析的元素边界上。
初始值 | auto |
---|---|
应用于 | block-level elements |
继承 | no |
适用媒体 | paged |
计算值 | as specified |
动画类型 | discrete |
规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
break-before
属性被指定为下面列表中的一个关键字值。
取值
一般破断值
auto
允许(但不强制)在主体框之前插入任何中断(页面,列或区域)。avoid
避免在主体框之前插入任何中断(页面,列或区域)。
分页值
avoid-page
在主体框之前避免任何分页符。
列中断值
avoid-column
避免在主框之前出现任何列中断。column
强制在主方框前出现列间隔。
区域中断值
avoid-region
避免在主框之前出现任何区域中断。region
在主框之前强制区域断开。
形式语法
auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
规范
Specification | Status | Comment |
---|---|---|
CSS Fragmentation Module Level 3The definition of 'break-before' in that specification. | Candidate Recommendation | Adds the recto and verso keywords. Changes the media type of this property from paged to visual. Defines the breaking algorithm with different kinds of breaks. |
CSS Regions Module Level 1The definition of 'break-before' in that specification. | Working Draft | Extends the property to handle region breaks. Adds the avoid-region and region keywords. |
CSS Multi-column Layout ModuleThe definition of 'break-before' in that specification. | Candidate Recommendation | Initial definition. Extends the CSS 2.1 page-break-before property to handle both page and column breaks. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | No support1 | (Yes)2 | No support | 10 | 11.10 - 12.1 | No support1 |
column, avoid-column | No support1 | No support | No support | 10 | 11.10 - 12.1 | No support1 |
recto, verso | No support | No support | No support | No support | No support | No support |
region, avoid-region | No support1 | No support | No support | No support | No support | No support1 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support1 | (Yes)2 | No support | ? | ? | No support1 |
column, avoid-column | No support1 | No support | No support | ? | ? | No support1 |
recto, verso | No support | No support | No support | No support | No support | No support |
region, avoid-region | No support1 | No support | No support | No support | No support | No support1 |