分割容器前面栏或页面 | 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在主体框之前避免任何分页符。
page在主体框之前强制分页。
always在主体框之前强制分页。（这是一个别名page，并且一直保留以便于从page-break-after该属性的子集转换）。
left在主体框之前强制一个或两个分页符，无论哪一个将使下一页成为左页。
right强制在主体框之前插入一个或两个分页符，无论哪一个将使下一页成为正确的页面。
recto在主体框之前强制一个或两个分页符，以下一个页面为准。（正面页面是从左向右展开的右页面或从右向左展开的左页面。）
verso强制在主体框之前插入一个或两个分页符，以下一页为准。（反面页面是从左向右展开的左页面或从右向左展开的左右页面。）
列中断值
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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
