移动端column-count只显示一栏的根本原因是容器块级流被破坏，常见于flex/grid父容器、height/max-height限制、float/absolute定位等；应改用column-width实现响应式分栏，并配合break-inside: avoid、hyphens: auto等控制断行与语义完整性。
移动端加了column-count却只显示一栏，根本不是代码写错了
浏览器看到的是被破坏的块级流，不是你的 CSS 没生效。常见干扰源包括：display: flex 或 display: grid 的父容器、子元素用了 float 或 position: absolute、容器设了 height 或 max-height、甚至 transform 和 will-change 都会触发合成层降级，让多列直接失效。
调试时先临时加 border: 1px solid red 看容器真实高度——很多情况是高度为 0，因为内容全脱离文档流了。确保容器是纯 <div> 或 <article>，子元素全是普通 <p>、<h2>，没任何定位或溢出隐藏。
别用column-count硬控移动端列数，column-width才是响应式核心
column-count: 2 在手机上强行分两栏，每栏可能只剩 120px 宽，小字号下阅读吃力；而 column-width: 16rem 是告诉浏览器“每栏至少这个宽”，窄屏自动退化为 1 栏，≥480px 才出 2 栏，≥768px 可能出 3 栏——这才是真正的流式响应。
-
columns: 2 16rem这种简写不推荐：它会让浏览器优先满足column-width，column-count的 “2” 只是建议值，实际常被忽略 - 设
column-width: 16rem+column-gap: 1rem，再配font-size: clamp(1rem, 4vw, 1.125rem)，行宽始终落在 45–75 字符舒适区间 - 安卓 Chrome 和 Safari 对
column-width支持稳定，但 iOS 16.4+ 才修复column-span: all在 flex 容器里的兼容性问题
文字断行错乱、单词被劈开？三行 CSS 必须一起写
默认行为就是按字符折行，英文单词中间切开、中文标点挂尾、长 URL 挤满一栏——这不是 bug，是没配对。必须同时加：
立即学习“前端免费学习笔记（深入）”；
-
hyphens: auto：仅对英文有效，且需 HTML 标签带lang="en"，否则 Chrome/Firefox 不生效 -
word-break: keep-all：中文场景防字被拆（尤其人名、术语、标题） -
overflow-wrap: break-word：处理英文长单词或 URL，强制在合适位置换行
示例：
.article { column-width: 16rem; column-gap: 1.5rem; hyphens: auto; word-break: keep-all; overflow-wrap: break-word; }
标题劈开、图片错位、段落被截断？靠break-inside和column-span显式控制
CSS 多列本质是按高度切片，不识别语义。一个 <p> 被从中间劈开、<h2> 卡在栏底、<img> 只显示一半，都是默认允许跨栏断裂的结果。
- 给标题、图表、重要段落加
break-inside: avoid，阻止它们被切开 - 想让图横跨所有栏？用
column-span: all，但只支持<h1>~<h6>和<div>等块级元素，且必须是多栏容器的直接子元素 - 避免用
float控制图片，它在多栏里行为不可靠；改用width: 100%+display: block保证整栏居中
真正难的不是写上 column-width，而是处理用户选中文本时跨栏复制乱序、小屏回退后 column-gap 失效、以及 Safari/Firefox 对 column-fill: balance 的兼容性差异——这些都得靠组合 break-before/break-after 或 JS 补位，不是加一行 CSS 就能搞定的。
