CSS多列布局下break-after: avoid-column不支持的替代方案求教

break-after: avoid-column目前确实没有全量浏览器支持，不用等该属性落地，靠现有兼容属性组合就能实现需求，也不会出现长段落排版错乱的问题。

核心实现（全主流浏览器兼容） #

不需要改动DOM结构，不需要包裹标题和正文，直接给所有层级标题加以下CSS即可：

h1, h2, h3, h4, h5, h6 {
  /* 旧版分页属性兜底，适配低版本浏览器 */
  page-break-after: avoid;
  page-break-inside: avoid;
  /* 标准分片规则，自动适配多列、打印分页等分片场景 */
  break-after: avoid;
  break-inside: avoid;
  /* 行数规则兜底，强制标题前后至少留3行关联内容才允许断列/断页 */
  orphans: 3;
  widows: 3;
}

关键注意点 #

• 不要用带-column后缀的枚举值：不带后缀的break-after: avoid会自动识别当前布局上下文，在多列场景下的兼容性远好于带后缀的属性值，搭配旧版page-break系列属性，可以覆盖Chrome、Firefox、Safari近5年的所有正式发布版本。
• orphans和widows原本是用来控制段落断行时最少保留行数的属性，应用在标题上可以从排版规则层面避免标题孤零零卡在列尾：强制要求标题后面必须跟至少3行正文，浏览器才允许在该位置断列。

之前包裹方案的问题原因 #

之前试的「div包裹标题+后续正文+break-inside: avoid-column」方案出问题，核心是给包裹块加的断列规则要求整个块必须完整塞进同一列，一旦后续段落高度超过单列可用高度，浏览器找不到能放下整块的位置，就会把整块内容硬推到下一列开头，留下大块空白。
如果需要强化标题和正文的绑定关系，只要给紧邻标题的正文段落设置orphans: 2就行，完全不用把标题和段落包在同一个容器里，长段落可以正常跨列拆分，不会出异常。

兜底方案 #

如果是固定列数、固定列宽的多列场景，可以加几行JS做兜底：在内容渲染完成、窗口尺寸变化时，计算每个标题距离当前列底部的高度，当剩余高度小于2倍正文行高时，给标题加break-before: column强制把标题推到下一列开头就行，性能开销极低，没有任何兼容问题。

内容的提问来源于stack exchange，提问作者Lupurus