safari≤15.6中break-inside: avoid在column-count下失效，因对inline-block或非直接多列父容器支持不全；需同时加page-break-inside: avoid并仅作用于figure等语义单元最外层。
break-inside: avoid 为什么在 Safari 里不生效
旧版 Safari（≤15.6）对 break-inside: avoid 在 column-count 场景下的支持不完整，尤其当容器含 display: inline-block 或父级未显式设多列上下文时，直接忽略该声明。
实操建议：
- 必须同时写
break-inside: avoid; page-break-inside: avoid;—— 后者在 Safari 中兜底更可靠 - 检查目标元素是否为块级且直接受控于多列容器：若父级是
display: grid或flex，break-inside无效 - 对 Safari 单独加媒体查询降级：
@supports not (break-inside: avoid) { .figure { break-before: column; } } - 避免嵌套
inline-flex或float在要保护的容器内，这些会触发 Safari 的兼容性路径失效
column-count 布局中哪些元素必须加 break-inside
不是所有块级元素都需加 break-inside: avoid，只加语义上“不可分割”的直接容器。加错位置或加太多，反而引发渲染异常或性能下降。
实操建议：
- 加在
<figure></figure>、<blockquote></blockquote>、<section></section>这类语义完整单元的**最外层标签**上，而不是里面的<img>或<p></p> -
<h2></h2>通常不用加 —— 它默认是块级、无子内容，浏览器极少跨列切它 -
<p></p>明确不该加 —— 段落本就设计为可断，强行避免会导致单列高度溢出甚至布局崩溃 - 自定义卡片组件（如
.card）若用于打印输出（如 WiFi 配置卡），必须加；若仅网页展示，视内容密度决定
column-span: all 标题和断行控制的关系
column-span: all 只让标题横跨全部列，它本身不提供任何断行防护能力。标题被劈开，往往是因为它的直接父容器没启用多列，或标题内部用了破坏块流的布局。
实操建议：
- 确保标题的**直接父元素**设置了
column-count或column-width，否则column-span无意义 - 标题内避免用
display: inline-flex包裹子文本 —— 这会让浏览器认为它是“不可中断的内联容器”，反而绕过break-inside - 如果标题含图标或 badge，用
::before/::after伪元素实现，而非额外span+float或position: absolute - 必要时对标题父容器加
break-before: column强制另起一栏，比依赖break-inside更可控
现代多栏替代方案：Grid 替代 column-count 的实际收益
当碎片化断行问题反复出现，尤其是需要稳定响应式、打印兼容、又不想写一堆 hack 时，display: grid 是更可控的替代路径，不是“换种写法”，而是避开 column-count 的底层限制。
实操建议：
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))替代column-count: 3，列数随容器宽度自然变化，不依赖分栏流 - 卡片类内容优先走 Grid：它天然支持
gap、place-items、grid-auto-rows，断行逻辑由轨道控制，不受break-inside兼容性拖累 - 若仍需打印分栏效果（如 PDF 导出），保留
@media print中的column-count，但运行时用 Grid，二者并存不冲突 - 注意 Grid 不解决“长段落自动分栏”需求 —— 它适合卡片/模块，不适合纯文本流；混合场景下，可用 Grid 做骨架，内部区域再用
column-count
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
