CSS3 column-span 属性

column-span 属性用于指定一个元素是否跨越多列显示。当设置为 all 时，元素将跨越所有列显示，而不是被分割成多个列显示。

语法

element {
  column-span: all | none;
}

• all：元素将跨越所有列显示。
• none：元素将按照正常的列布局显示。

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Span Example</title>
<style>
    .content {
        column-count: 2;
    }
    .span {
        column-span: all;
        background-color: lightblue;
    }
</style>
</head>
<body>
<div class="content">
    <div class="span">
        <p>This is a paragraph that spans across both columns.</p>
        <p>This is another paragraph that also spans across both columns.</p>
    </div>
    <p>This is a regular paragraph that follows the spanned element.</p>
</div>
</body>
</html>

在上面的示例中，.span 类的元素跨越了两列显示，背景颜色为浅蓝色。.content 类的元素设置了 column-count: 2;，使内容分成两列显示。

column-span 属性在处理多列布局时非常有用，可以通过设置跨列显示的元素来突出显示某些内容，提高页面的可读性。