Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
column-count 是实现多栏文本排版最直接、语义最干净的方案，适合新闻、博客类长段落，不改变 dom 顺序且不影响可访问性；column-width 更适合响应式场景，浏览器依最小栏宽自动计算栏数；二者不可同时使用，且需避免在 flex/grid 容器中误用。
column-count 是实现多栏文本排版最直接、语义最干净的方案，适合新闻、博客类长段落，不改变 DOM 顺序，也不影响可访问性。
用 column-count 实现固定栏数分栏
适用于内容长度足够、且明确需要几栏的场景（如三栏新闻摘要）。浏览器会按容器宽度平均切分，但不保证每栏高度一致。
- 必须作用于
display: block或display: inline-block元素；若父容器设了display: flex或display: grid，column-count会失效 - 基础写法：
.article { column-count: 3; column-gap: 1.5rem; column-rule: 1px solid #ddd; } -
column-gap推荐用rem或em，避免在小屏下间隙过大；column-rule不是必需，但加了能提升视觉区分度
用 column-width 实现响应式自动栏数
更适合移动端或内容长度不确定的场景。浏览器根据设定的最小栏宽（如 12em）自动计算最多能放几栏，比 column-count 更灵活，但实际栏数可能少于预期（比如内容太短时只出一栏）。
- 写法示例：
.article { column-width: 12em; column-gap: 1rem; } - 不要同时设
column-count和column-width—— 浏览器会优先尊重column-width，column-count仅作最大栏数上限（IE 中行为不一致，建议只选其一） - 移动端慎用固定像素值（如
200px），改用相对单位（em/rem）或配合媒体查询动态调整
避免 break-inside: avoid 过度使用
当某段内容（如 <h2></h2>、<figure></figure>）被强制禁止跨栏时，容易导致栏高严重不均，甚至出现大片空白。
- 只对真正需要保持完整的块级元素加该声明，例如：
h2, figure, blockquote { break-inside: avoid; } - 不要给每个
<p></p>都加break-inside: avoid，否则分栏逻辑会被打乱，退化为单栏显示 - 注意：Firefox 对
break-inside支持更严格，Chrome/Safari 在某些嵌套场景下可能忽略该声明
别把 flex 或 grid 当成分栏工具
display: flex 和 display: grid 是布局容器，不是文本流排版机制。它们无法让一段连续文字自动断行分栏 —— 这是 column-* 的专属能力。
- 常见错误：
grid-template-columns: repeat(3, 1fr)套一个长<p></p>，结果整段文字全挤在第一列里 - 如果真要用 Grid 做“视觉三栏”，需把内容预先拆成多个独立子元素（如多个
<p></p>或<div>），再分配位置 <li>想兼顾结构化布局 + 文本分栏？可以嵌套：外层用 <code>grid划区域，内层在文本容器上单独加column-count
真正难调的不是写法，而是内容语义与分栏节奏的匹配——比如标题卡在栏尾、图片被截断、引文跨栏断裂。这些细节不会报错，但会悄悄破坏阅读体验。
