结论：应使用 column-count 或 column-width 实现多列文字排版，二者不可强设冲突；column-width 优先级更高，column-count 是目标值而非强制值；需配合 column-gap、媒体查询及 column-span: all 等确保可读性与兼容性，避免在含交互元素区域滥用。
直接说结论：用 column-count 或 column-width，别写 HTML 标签切列，也别硬套 display: grid 或 float —— 那不是多列文字排版，那是手动分块。
为什么 column-count 和 column-width 不能同时强设
浏览器会优先满足 column-width（最小列宽），再尽可能接近 column-count（目标列数）。比如设了 column-width: 16rem 且容器只有 30rem 宽，那最多只能出 1 列，column-count: 3 就被无视了。
- 想稳控列数 → 只设
column-count，但要接受内容少时也撑出空白列 - 想保阅读舒适度 → 主设
column-width，配合column-gap和媒体查询动态调列数 - 别写
columns: 3 16rem这种简写——可读性差，调试时难定位是宽度还是数量在起作用
break-inside: avoid 为什么经常失效
它只对块级元素生效，且部分旧 Safari（iOS 14 以下）需加前缀。更关键的是：如果父容器用了 column-span: all（比如标题横跨），那该标题内部的子元素就不再受 break-inside 约束。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须显式写在可能被截断的元素上：
h2, h3, img, blockquote等 - 避免嵌套多层
div包裹段落——每层都可能成为断点，不如直接给p加样式 - 若仍被劈开，检查是否用了
display: inline-block或transform，这些会让break-inside失效
移动端列数突然变乱，怎么快速修复
小屏下 column-count: 3 是最常见翻车点：列宽跌破 120px，字挤成一团，行高崩坏。这不是 bug，是没做响应式兜底。
- 必须写媒体查询重置：
@media (max-width: 768px) { .content { column-count: 1; } } - 别依赖
column-fill: balance—— 兼容性极差，Chrome/Firefox 表现不一致，实际几乎不用 - 图片多的页面加
will-change: contents前要实测：仅当滚动卡顿明显时加，否则可能引发额外重绘
::first-line 和 ::first-letter 只在第一列生效，正常吗
完全正常，这是 CSS 多列规范明确规定的，不是渲染缺陷。伪元素只作用于整个容器的“视觉首行/首字”，而多列布局中，只有第一列的开头才算“首”。
- 不要试图 hack 每列首行缩进——CSS 无原生支持，JS 计算列位置极易错位
- 统一用
text-indent控制段落首行，比模拟首字下沉靠谱得多 - 标题用
column-span: all横跨，但注意它只对display: block元素有效，inline元素得先转块
真正容易被忽略的，是判断「这里到底适不适合用多列」：长文本正文可以，但含交互元素（按钮、输入框、下拉菜单）的区域，一旦套上 column-count，焦点顺序、键盘导航、屏幕阅读器行为都会异常——这时候就得退回到 grid 或 flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
