语法
column-span: none | all | initial | inherit;
column-span 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
h2 {
-webkit-column-span: none; /* Chrome, Safari, Opera */
column-span: none;
}
</style>
</head>
<body>
<div>
<h1>坚持奋斗</h1>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
结果
在以下示例中，标题跨越所有四列。
具有“all”值的 column-span 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
</style>
</head>
<body>
<div>
<h1>坚持奋斗</h1>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
具有“initial”值的 column-span 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
h1 {
-webkit-column-span: initial; /* Chrome, Safari, Opera */
column-span: initial;
}
</style>
</head>
<body>
<div>
<h1>坚持奋斗</h1>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
CSS column-span 属性值说明
| 值 | 说明 |
|---|---|
| none | 这是默认值。元素不是跨越所有列。它横跨一列。 |
| all | 元素跨越所有列。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
column-span 属性用于定义元素是跨越一列还是跨越所有列。
此属性是 CSS3 属性之一。
它有两个值：none 和 all。
“none”是 color-span 属性的默认值。
它跨越一列的元素。
“all”值指定元素应跨越所有列。
column-span 属性可以跨越宽图像。
但它不允许跨越多列的图像。
它允许选择图像应该跨越所有列还是根本不跨越。
只有当元素是块级元素时，它才能跨列扩展。
| 初始值 | none |
|---|---|
| 应用于 | 在流块级元素中 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnSpan=“all”； |
日期：2020-06-02 22:14:22 来源：oir作者：oir