CSS参考手册
片段模块 | Fragmentation
分割容器前面栏或页面 | 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 |
片段模块 | Fragmentation相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。