CSS break-inside属性-之路教程

语法

break-inside: auto | avoid | always | all | initial | inherit;

break-inside属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        /* Safari and Chrome */
        -webkit-column-count: 3;
        -webkit-column-rule: 2px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-rule: 2px dotted #ccc;
        /* CSS3 */
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-inside: always;
      }
    </style>
  </head>
  <body>
    <div class="multicol">
      <h2>生活</h2>
      <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
      <hr>
      <h2>思念</h2>
      <p>是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。</p>
    </div>
  </body>
</html>

CSS break-inside属性

break-inside 是一个 CSS 属性，它定义了任何中断（页面、列）在生成的框内的行为方式。
当未指定生成的框时，将忽略此属性。
它有四个值：auto、avoid、always、all。

此属性已弃用。

每个元素边界都被以下三个属性所触及：

Break-after，这是前一个元素的值。
Break-before，即下一个元素的值。
Break inside，这是包含元素的值。

应用以下规则来决定是否必须休息：

如果上述三个值之一是强制中断值，则优先。如果这些值中的一个或者多个是强制中断，则使用最近出现的元素的值。因此，break-before 值的优先级高于 break-after 值，而 break-after 值的优先级高于 break-inside 值。
如果这三个值之一是避免中断值，则不会应用此类中断。

初始值	auto
应用于	块级元素。
继承	无效
可动画的	离散的。
版本	CSS3.
DOM 语法	object.style.breakInside = "avoid";

CSS break-inside 属性值说明

值	描述
auto	强制将页面/列打破元素内部。
avoid	避免在元素内部任何突破。
avoid-page	避免元素内的页面中断。
avoid-column	避免在元素内部的列断裂。
avoid-region	避免元素内的区域断裂。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

日期：2020-06-02 22:14:25 来源：oir作者：oir

←CSS break-before 属性

CSS caret-color 属性→

语法

break-inside属性示例：

CSS break-inside 属性值说明

目录