容器中途分割 | 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允许（但不强制）在原理框中插入任何中断（页面，列或区域）。
avoid避免在主体框中插入任何中断（页面，列或区域）。
avoid-page避免原理框中的任何分页符。
avoid-column避免原理框中的任何列中断。
avoid-region避免原理框中的任何区域中断。
形式语法
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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
