要实现报纸效果需多列布局协同控制：容器须为块级元素且无固定高度，禁用脱离文档流的样式；中文用word-break: keep-all，英文配hyphens: auto；标题图片加break-inside: avoid，主标题用column-span: all；响应式优先column-width并@supports降级。
直接加 columns: 3 不会自动变成报纸效果。它只是把容器视觉切分成几栏，内容仍按文档流顺序从上到下、从左到右填充，不识别标题、图片或段落语义。真要接近报纸排版，得靠几个关键控制点协同配合。
先确保多列能正常触发
很多页面只显示一栏，不是代码写错了，而是布局前提被破坏：
- 容器必须是块级元素（如
div、article），不能是flex或grid容器——这两种布局会完全禁用多列 - 避免给容器设固定
height，否则内容被截断，后续栏就空了 - 子元素别用
float、position: absolute或transform，这些会让内容脱离文档流，不参与分栏 - 调试时临时加
border: 1px solid #000，看看容器是否真实撑开了高度
让文字读起来像报纸
中文排版需防字被拆开、英文防单词硬切、长 URL 防挤满整行：
-
word-break: keep-all：中文场景下禁止单个汉字换行，保人名、术语完整 -
overflow-wrap: break-word：对英文长单词或 URL 强制合理折行 -
hyphens: auto：仅对英文有效，需配合lang="en"属性才起作用 -
line-height: 1.4：设在容器上，比默认值更舒展，减少视觉疲劳
防止标题、图片、段落被“劈开”
浏览器默认会在任意位置断栏，导致标题卡在栏底一半、图片上下分离：
- 给
h1–h3、p、img、figure加break-inside: avoid（Safari 需补-webkit-column-break-inside: avoid） - 想让主标题横跨所有栏？用
h2 { column-span: all; }，注意它只对直接子元素生效 - 段落首尾留足空间：加
orphans: 3; widows: 3，避免孤行出现在栏顶或栏底
响应式与降级处理
报纸式排版不是在所有尺寸下都适用：
- 优先用
column-width: 16rem，窄屏自动变 1 栏，中屏 2 栏，宽屏 3 栏，比column-count: 3更自然 - 小屏下
column-gap和column-rule会失效，需单独用媒体查询重置为单列样式 - 用
@supports (columns: 3)包裹多列规则，老浏览器跳过，不报错也不误渲染 - 图文混排复杂时，纯 CSS 难以保证图片下方才开始分栏，可结合 JS 动态读取图片高度，用 padding 抬升正文起始位置
