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>、<figure>）被强制禁止跨栏时，容易导致栏高严重不均，甚至出现大片空白。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 只对真正需要保持完整的块级元素加该声明，例如：

  h2, figure, blockquote {
    break-inside: avoid;
  }

• 不要给每个 <p> 都加 break-inside: avoid，否则分栏逻辑会被打乱，退化为单栏显示
• 注意：Firefox 对 break-inside 支持更严格，Chrome/Safari 在某些嵌套场景下可能忽略该声明

别把 flex 或 grid 当成分栏工具

display: flex 和 display: grid 是布局容器，不是文本流排版机制。它们无法让一段连续文字自动断行分栏 —— 这是 column-* 的专属能力。

• 常见错误：grid-template-columns: repeat(3, 1fr) 套一个长 <p>，结果整段文字全挤在第一列里
• 如果真要用 Grid 做“视觉三栏”，需把内容预先拆成多个独立子元素（如多个 <p> 或 <div>），再分配位置
• 想兼顾结构化布局 + 文本分栏？可以嵌套：外层用 grid 划区域，内层在文本容器上单独加 column-count

真正难调的不是写法，而是内容语义与分栏节奏的匹配——比如标题卡在栏尾、图片被截断、引文跨栏断裂。这些细节不会报错，但会悄悄破坏阅读体验。