column-span

column-span CSS 属性在设置为 all 时，可以使元素跨越所有列。

试试看

跨越多个列的元素称为跨列元素。

语法

css
/* Keyword values */
column-span: none;
column-span: all;

/* Global values */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;

column-span 属性指定为以下列出的关键字值之一。

Values

none

元素不跨越多列。

all

元素跨越所有列。出现在元素之前的正常流中的内容将在元素出现之前自动在所有列中平衡。元素建立一个新的块级格式化上下文。

正式定义

初始值none
应用于内联块级元素
继承否
计算值如指定
动画类型离散

正式语法

column-span = 
  none  |
  all

示例

使标题跨越列

在此示例中，标题跨越文章的所有列。

HTML

html
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>

CSS

css
article {
  columns: 3;
}

h2 {
  column-span: all;
}

结果

规范

规范
CSS 多列布局模块级别 1
# column-span

浏览器兼容性

BCD 表格仅在浏览器中加载

参见