break-inside: avoid是唯一能阻止多栏中元素跨列断裂的声明，但仅对多列流中的块级直接容器生效，需配合page-break-inside: avoid覆盖打印场景，且受display类型、浏览器兼容性等限制。

column-count 在 Safari、旧版 Chrome 或某些 WebView 中把卡片劈开，不是写法错了，而是没告诉浏览器“哪些东西不能切”——break-inside: avoid 是唯一能起效的防护手段，但它有明确生效边界，且必须配上前缀和降级策略。

为什么 break-inside: avoid 有时完全不生效

这个声明只对「处于多列流中的块级直接容器」起作用，其他情况全被忽略：

• 元素是 display: inline、flex 或 grid 容器 → 浏览器跳过处理
• 父级设了 column-span: all → 子元素脱离列流，break-inside 失效
• 目标元素本身是 display: inline-block 或带 float → 多数浏览器无视该声明
• 加在 <img> 或 <p></p> 上，而不是它的直接父容器（如 <figure></figure>）→ 防护对象错误
• iOS Safari ≤15.6 对 break-inside 支持不稳定，需额外加 -webkit-column-break-inside: avoid

哪些元素必须加 break-inside: avoid

不是所有块都要加，只加语义上「不可分割」的容器：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• <figure></figure> + <figcaption></figcaption>：图与说明必须共存，劈开会丢失上下文
• <blockquote></blockquote>：引文一旦跨列，原意极易被曲解
• 自定义卡片（如 <div class="card">）：尤其用于打印 WiFi 卡、课程卡片等实物输出场景 <li> <code><ul></ul> 或 <ol></ol> 容器本身：防止列表项散落在不同列（注意不是给 <li> 加）

避免加在 <p></p> 或 <h2></h2> 上——段落本就该断行，标题默认是块级且无子内容，断裂风险极低。

如何兼容 Safari 和打印场景

break-inside: avoid 和 page-break-inside: avoid 必须同时写，二者作用域不同：

• break-inside 控制分栏（column-count/column-width）
• page-break-inside 控制打印分页（如 wkhtmltopdf 导出 PDF）
• 现代写法统一用：break-inside: avoid; page-break-inside: avoid;，无需加 avoid-column 或 avoid-page
• 若打印样式表独立加载，建议在 @media print 中再单独声明一次

column-count 响应式错乱时别硬调列数

横竖屏切换时内容“漂移”或卡片错位，往往是因为媒体查询中直接改 column-count，触发强制重排，而 break-inside 的保护逻辑在重排瞬间失效：

• 优先用 column-width 替代 column-count（例如 column-width: 18em），让浏览器按需生成列数
• 若必须用 column-count，搭配 column-fill: auto（而非默认的 balance），避免列高被强行拉齐
• 禁用容器的 height 或 max-height + overflow: hidden —— 这会截断末列，让人误判为布局失败
• 检查是否混用了 float：浮动元素会脱离文档流，导致列高计算失效，视觉上严重错位

真正难处理的不是怎么写，而是哪些地方不能写——比如给 <p></p> 加 break-inside: avoid 看似保险，实则会让段落拒绝断行，撑破列宽，引发更隐蔽的重排问题。