break-inside - CSS(层叠样式表) 编辑
草案
本页尚未完工.
break-inside
CSS 属性描述了在多列布局页面下的内容盒子如何中断,如果多列布局没有内容盒子,这个属性会被忽略。
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
在每一个元素的边界,都可能生成一个中断点,这些中断点由三个属性来定义。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
, 则在该点上不应用此类中断。
一旦应用了强制中断,如果需要,可以添加软中断,但不能在元素边界上添加相应的avoid
值。
初始值 | auto |
---|---|
适用元素 | block-level elements |
是否是继承属性 | 否 |
计算值 | as specified |
Animation type | discrete |
Syntax
Values
auto
- 允许(既不禁止也不强制)在主框中插入任何中断(页、列或区域)。
avoid-page
- 避免主框中任何页的中断点
avoid-column
- 避免主框中任何列的中断点
avoid-region
- 避免原则框内的任何区域中断。
Formal syntax
auto | avoid | avoid-page | avoid-column | avoid-region
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fragmentation Module Level 3 break-inside | Candidate Recommendation | |
CSS Regions Module Level 1 break-inside | Working Draft | Extends the property to handle region breaks. |
CSS Multi-column Layout Module break-inside | Working Draft | Initial definition |
Browser compatibility
BCD tables only load in the browser
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论