column-span: all 是 css 属性，非 html 属性，需父容器启用多列布局（如 column-count）且目标元素为直接子块级元素才生效。

column-span: all 不是 HTML 属性，也不能直接写在 HTML 标签里——它只在 CSS 中生效，且必须满足两个硬性条件才能起作用。

为什么 column-span: all 写了却没反应

最常见的情况是：样式写了，但浏览器完全忽略。这不是 bug，而是规范限制导致的“静默失效”。

• 父容器没启用多列布局（比如漏了 column-count、columns 或 column-width）
• 目标元素不是父容器的**直接子元素**（中间嵌了一层 <div> 就断掉） <li>目标元素是行内级（如 <code><span></span>、<strong></strong>），而 column-span 只认块级盒（display: block 或 flow-root）
• 用了表格结构（<table>、<code><td>），但 <code>column-span 和表格 colspan 完全无关

  column-span: all 必须配合的 CSS 多列属性

  它不单独存在，必须和以下任一属性共存于父容器上：

  • column-count: 2（强制分 2 列）
  • column-width: 150px（每列最小宽度，列数自适应）
  • columns: 3 200px（简写，优先列数，再 fallback 到宽度）

  缺任何一个，column-span: all 都会被浏览器当作无效声明丢弃。

  正确 DOM 结构与样式写法示例

  下面这段代码能稳定生效：

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载

  <div class="article">
    <h2>这是跨列标题</h2>
    <p>第一段正文...</p>
    <p>第二段正文...</p>
  </div>
  
  <style>
  .article {
    column-count: 3;
    column-gap: 1.5rem;
  }
  .article > h2 {
    column-span: all;
    margin: 1rem 0;
  }
  </style>

  注意三点：

  • h2 是 .article 的**直接子元素**，不能包在额外 <div> 里 <li> <code>h2 默认就是 display: block，无需手动改
  • 旧版 Safari（≤15.4）需要加 -webkit-column-span: all 前缀

  容易被忽略的兼容性与语义陷阱

  即使样式逻辑全对，仍可能出问题：

  • Firefox 71+、Chrome 50+ 支持无前缀 column-span；IE 完全不支持，Edge 16+ 开始支持
  • 别给跨列元素设 break-inside: avoid——它本身已由 column-span 控制流，加了反而可能卡住渲染
  • 想让一段文字“看起来跨列”，不能对 <span></span> 强设 display: block + column-span: all，这会破坏语义和可访问性

  真正要跨列的，就该是语义明确的块级元素，比如 <h2></h2>、<section></section> 或带 role="heading" 的 <div>。</div>