column-span 跨列属性
最后更新：2026-09-13
column-span column-span 跨列属性
column-span 属性用于指定某个元素是否跨越多列显示。设置为 all 时，该元素会横跨所有列，常用于多列布局中的标题或副标题，使其在视觉上与分栏内容区分开。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
column-span: none | all;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | all | 关键字 | 元素是否跨列 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-span | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： column-span: all 常与多列布局中的标题配合使用，让标题横跨所有列，使文章结构更清晰。
注意： column-span 仅影响该元素本身，不会改变其他元素的列分布。在 Firefox 旧版本中支持有限，需注意兼容性。
❓ 常见问题
Qcolumn-span 可以设置为跨越指定列数吗？
A不可以。column-span 只有 none（不跨列，默认）和 all（跨越所有列）两个值，无法指定跨 2 列或 3 列这种中间状态。要实现部分跨列，只能自行用嵌套的多列容器模拟，或用 grid 布局替代。这个设计是 CSS 多列规范的既定限制，使用时需接受。
Q哪些元素可以使用 column-span？
Acolumn-span 应用于多列容器内处于顶层流的块级元素，最常见的场景是标题（h1~h6）、文章副标题、引言块等，让它们横跨所有列形成视觉分隔。注意它不能应用于被嵌套在列内的元素内部，且受浏览器兼容性影响，旧浏览器可能不生效。
Qcolumn-span:all 不生效是什么原因？
A可能原因：1）元素不是多列容器的直接块级子元素；2）浏览器过旧（column-span 的跨列支持在部分版本浏览器曾不完整，Firefox 早期版本支持有限，需确认内核版本）；3）多列容器本身没有生效（列数为 1）。建议先确认多列是否显示，再检查元素层级。
Qcolumn-span 会破坏多列文本的阅读顺序吗？
A不会。column-span:all 的元素会把多列文本分成上下两段：元素上方的列先排满，然后显示横跨元素，再继续排元素下方的列。阅读顺序依然按文档流的先后，只是标题强制占满整行。所以跨列标题放在正文开头时，正文会在标题下方正常分列，顺序不受影响。
🏷️ 相关属性
💡 相关案例
📚 相关教程
