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 定义了当前元素的中断点。

如果需要定义一个中断点,必须遵循以下原则:

  1. 如果这三个中断属性的值有一个是强制中断值(这些强制中断值包括了 always, left, right, page, column, region),那么这个属性的值就具有优先权。如果其中一个以上是这样的断点,则使用流中最新出现的元素的值。因此,break-before值优先于break-after值,而后者又优先于break-inside值。
  2. 如果三个相关值中的任何一个是避免中断值, 相关值包括 avoid, avoid-page, avoid-region, avoid-column, 则在该点上不应用此类中断。

一旦应用了强制中断,如果需要,可以添加软中断,但不能在元素边界上添加相应的avoid值。

初始值auto
适用元素block-level elements
是否是继承属性
计算值as specified
Animation typediscrete

Syntax

Values

auto
允许(既不禁止也不强制)在主框中插入任何中断(页、列或区域)。
avoid-page
避免主框中任何页的中断点
avoid-column
避免主框中任何列的中断点
avoid-region
避免原则框内的任何区域中断。

Formal syntax

auto | avoid | avoid-page | avoid-column | avoid-region

Specifications

SpecificationStatusComment
CSS Fragmentation Module Level 3
break-inside
Candidate Recommendation
CSS Regions Module Level 1
break-inside
Working DraftExtends the property to handle region breaks.
CSS Multi-column Layout Module
break-inside
Working DraftInitial definition

Browser compatibility

BCD tables only load in the browser

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:83 次

字数:5279

最后编辑:6 年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文