• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • break-inside

    版本:CSS3

    break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断,如果多列布局没有内容盒子,这个属性会被忽略。

    示例

    break-inside: auto;
    break-inside: avoid;
    break-inside: avoid-page;
    break-inside: avoid-column;
    break-inside: avoid-region;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器支持break-inside

    语法

    break-inside:auto | avoid-page | avoid-column | 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:允许(既不禁止也不强制)在主框中插入任何中断(页、列或区域)。
    • avoid-page:避免主框中任何页的中断点
    • avoid-column:避免主框中任何列的中断点。
    • avoid-region:避免原则框内的任何区域中断。还处于实验阶段
    默认值auto
    适用于块级元素
    继承性
    动画性
    计算值指定值

    上篇:break-after