容器中途分割 | break-inside
break-inside
break-inside
CSS属性定义页,列或区域断裂的行为方式产生的箱内。如果没有生成的框,则忽略该属性。
/* Keyword values */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
/* Global values */
break-inside: inherit;
break-inside: initial;
break-inside: 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-inside
属性被指定为下面列表中的一个关键字值。
取值
auto
允许(但不强制)在原理框中插入任何中断(页面,列或区域)。
形式语法
auto | avoid | avoid-page | avoid-column | avoid-region
规范
Specification | Status | Comment |
---|---|---|
CSS Fragmentation Module Level 3The definition of 'break-inside' in that specification. | Candidate Recommendation | No change. |
CSS Regions Module Level 1The definition of 'break-inside' in that specification. | Working Draft | Extends the property to handle region breaks. |
CSS Multi-column Layout ModuleThe definition of 'break-inside' in that specification. | Candidate Recommendation | Initial definition. |
浏览器兼容性
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 |