column-span 在多列布局中到底能不能让文字跨列
不能——column-span 只对块级元素生效，且仅在 columns 或 column-count 触发的多列上下文中起作用；它对纯文本节点、行内元素（比如 <span> 或直接写的文字）完全无效。
常见错误现象：column-span: all 写在 <p> 里没反应，或套在 <span> 上发现根本不起作用。这是因为浏览器只允许 column-span 用在「成为列容器直系子元素的块盒」上，比如 <h2>、<div>、<section> 这类 display 为 block/flow-root 的元素。
- 必须把要跨列的元素放在多列容器内部，且是其**直接子元素**
- 该元素自身需是块级（
display: block或类似），不能是inline - 父容器必须启用多列，例如设置
columns: 3或column-count: 3 -
column-span: all是唯一合法值（column-span: none无效）
正确写法：标题跨列 + 正文分栏的典型结构
这是 column-span 最常用也最可靠的场景：用 <h2> 做跨列标题，后面跟一个普通 <p>，再让整个容器分栏。
.article {
columns: 2;
column-gap: 2rem;
}
.article > h2 {
column-span: all;
margin: 0 0 1rem;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
<h2>必须是.article的**直接子元素**，如果中间嵌了<div>就失效 - 不要给
<h2>设break-inside: avoid—— 它本身已由column-span控制分页/分栏行为，加了反而可能引发渲染异常 - 某些旧版 Safari（column-span 支持不完整，测试时建议用最新 Chrome/Firefox 验证逻辑
为什么 span、strong 这类行内元素设 column-span 没用
因为规范明确限定：只有生成「块级盒」（block-level box）的元素才被允许参与列跨度计算。而 <span> 默认是 display: inline，它不会产生新的块格式化上下文，浏览器直接忽略其 column-span 声明。
如果你真想让某段文字视觉上“跨列”，只能换思路：
- 把它包进一个
<div>或<h3>，并确保该元素是列容器的直接子元素 - 或者放弃多列布局，改用 CSS Grid 模拟分栏效果，此时控制跨行/跨列更自由
- 切忌用
display: block强行改造<span>并设column-span—— 即使 DOM 结构满足，语义和可访问性也会受损
兼容性和容易被忽略的细节
Chrome 和 Firefox 对 column-span 支持良好，但 Edge（基于 Chromium 后）没问题，Safari 则长期存在两个坑：
- Safari ≤15.6 不支持
column-span，会静默忽略（不报错也不生效） - Safari 16+ 支持了，但若父容器用了
column-fill: balance（默认值），跨列元素之后的内容可能出现空白列或错位 - 所有浏览器都不允许
column-span与break-before/break-after混用在同一个元素上，否则跨列行为不可预测 - 打印预览中，
column-span表现不稳定，部分浏览器会退化为普通块级显示，别依赖它做 PDF 导出排版
真正难的不是写对那一行 column-span: all，而是确认整个 DOM 层级、display 类型、父容器样式是否恰好落在规范允许的窄缝里——漏掉任意一环，它就安静地什么也不做。
