如何打破 CSS 中的报纸样式 3 栏布局？

Question

我有以下要求来设计打印布局以生成 pdf，我尝试了各种选项，包括 CSS flex 和 grid，但收效甚微。

要求是：

以 3 页分栏布局显示内容 - 类似于报纸样式。
如果一列包含太多信息，那么它将“流入”右侧的下一列。
一旦我们达到了 3 列的限制，那么第 4 列应该移动到下一行而不是列（如下一页）。另外，我们不知道总共有多少列或行。

我能够达到第一个要求。但是，我找不到根据 div 宽度（或页面宽度）打破 CSS 中第 3 列的方法。

我正在尝试以下代码：

.newspaper {
  max-height: 500px;
   column-count: 3; 
  
}
.article {
  break-inside: avoid;
  page-break-after: always;        
}
.chart {
  background: #ccc;
  height: 200px;
}

 <div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

预期输出：

我对任何 CSS 方法都很满意，只要它适用于 Chrome。

谢谢。

Answer 1

我用 Grid 实现了这个。

如果你想在一个列内中断，我认为你需要使用JavaScript。这是您可以从 CSS.

获得的最大结果

.newspaper {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
}
.article {
    break-inside: avoid;
    page-break-after: always;        
}
.chart {
    background: #ccc;
    height: 200px;
}

<div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

Answer 2

注意： 这是一种快速而肮脏的 hack，不建议在 Web 开发中使用，因为它会为它创建的每个页面制作整个文档的副本。然而，问题的范围似乎是一个从 HTML 中创建 PDF 的私人工具。对于那个用例，我认为这个技巧很合适。它符合您的所有标准，甚至跨页面并且响应迅速。

为什么要耍花招？

正如其他人所提到的，CSS 目前没有提供一种自动的方式来将列分解成行并使文本在它们之间流动。 display: grid 做了一些相关的事情，但保持框完好无损，这意味着元素不能在页面上以一个不间断的流的形式流动。 flow-into 和 flow-from 看起来很有前途，但尚未在您喜欢的环境 (Chrome) 中实施。

诀窍

此设置使用 columns 属性将您的全部内容分成几列，但使用带有 overflow: hidden 的容器仅显示其中三个。当页面加载时，一段 javascript 然后测量容器大小，将其与滚动溢出进行比较以确定隐藏了多少页内容并相应地创建副本，每个副本都有一个偏移量以仅显示接下来的三个项目.因此，虽然每一页都包含整个文档，但结果是文章在页面上自由流动的错觉。

可以使用 .pages 规则集中的变量配置维度。考虑到这种方法的 hacky 性质，进一步的风格定制可能需要一些修补。

window.addEventListener("load", reflowPages);
window.addEventListener("resize", reflowPages);

function reflowPages() {
  const pages = document.querySelector(".pages");
  const template = document.querySelector(".page");
  if (pages == null || template == null) return;

  const viewportWidth = template.clientWidth;
  const totalWidth = template.scrollWidth;
  const pageCount = Math.ceil(totalWidth / viewportWidth);

  cleanPages();
  for (let n = 1; n < pageCount; n++) {
    const page = createPage(template, n);
    pages.appendChild(page);
  }
}

function cleanPages() {
  const [, ...rest] = document.querySelectorAll(".page");
  rest.forEach((v) => v.remove());
}

function createPage(template, n) {
  const element = template.cloneNode(true);
  element.style.setProperty("--page", n);
  return element;
}

.pages {
  --page-width: 100%;
  --page-height: 500px;
  --columns: 3;
}

.page {
  width: var(--page-width);
  height: var(--page-height);
  overflow: hidden;
  border-bottom: 1px solid black;
  padding: 1em 0;
}

.scroller {
  position: relative;
  max-height: 100%;
  column-count: var(--columns);
  column-gap: 0;
  left: calc(var(--page, 0) * -100%);
}

.article {
  padding: 0 0.5em;
  /* Instead of column-gap */
}

.chart {
  background: #ccc;
  height: 200px;
  break-inside: avoid;
}

<div class="pages">
  <div class="page">
    <div class="scroller">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat.
        </p>
      </div>
    </div>
  </div>
</div>

缺点/限制

根据文档的大小，这可能不是很高效，但如前所述，这对于您的用例来说可能是可以接受的。
column-gap 会干扰计算，因此您应该在子元素上使用 padding（如示例中所示）
给定多个页面，底部 .page 将始终被不可见的溢出元素拉伸到最大高度。

Answer 3

一个想法是将整个页面的高度限制为 100vh。这样，在每篇文章之前使用分栏和分隔符，您就可以使用水平导航而不是垂直导航。至少这种方式可以控制中断和大小。例如，

注意：运行代码全尺寸和水平滚动：

body {
  margin: 0;
  padding: 0 2ch;
}

main {
  columns: auto;
  columns: 3;
  max-height: 100vh;
  column-gap: 2ch;
}

article {
  break-before: column;
}

div {
  height: 10em;
  background: silver;
}

<body>
  <main>
    <article>
      <h2>Article 1</h2>
      <div></div>
      <p>Oellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
        porttitor, facilisis luctus, metus</p>
    </article>
    <article>
      <h2>Article 2</h2>
      <div></div>
      <p>Nellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit
        eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
        Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </article>
    <article>
      <h2>Article 3</h2>
      <div></div>
      <p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec
        non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
        metus</p>
    </article>
    <article>
      <h2>Article 4</h2>
      <div></div>
      <p>Sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      <p>Nellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit
        eget</p>
    </article>
    <article>
      <h2>Article 5</h2>
      <div></div>
      <p>Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
        Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
        metus</p>
    </article>
  </main>
</body>

Answer 4

有趣的问题。我认为我的解决方案符合您的所有要求。

想法是利用默认布局流来满足要求 2 和 3。然后只需旋转整个元素即可。但是它不灵活：

不占满浏览器宽度。
如果尝试更新页高和页宽，样式会很乱，需要重新调整CSS属性才能正常
我还没有发现的其他错误。

我的解决方案只是为了好玩。但它确实解决了你的问题。我还尝试在 chrome 中打印此 HTML 页面，chrome 会正确处理它。

* {
  margin: 0;
  padding: 0;
}

.chart {
  background: #ccc;
  width: 200px;
}

.newspaper {
  position: absolute;
  top: 0;
  left: 100px; 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  transform: rotate3d(1,1,0, 180deg);
  height: 912px; /* page width */
}

.article {
  width: 800px; /* page height */
}

.article * {
  display: inline-block;
  writing-mode: vertical-rl;
  height: 300px; /* column width */
  transform: scale(-1,1);
}

<div class="newspaper">
  <div class="article">
    <h1>Article 1</h1>
    <div class="chart">Chart 1</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>        
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>
  </div>
  <div class="article">
    <h1>Article 2</h1>
    <div class="chart">Chart 2</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    <p>xxxxxxxxxx</p>
  </div>
  <div class="article">
    <h1>Article 3</h1>
    <div class="chart">Chart 3</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>

  <div class="article">
    <h1>Article 4</h1>
    <div class="chart">Chart 4</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="article">
    <h1>Article 5</h1>
    <div class="chart">Chart 5</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="article">
    <h1>Article 6</h1>
    <div class="chart">Chart 6</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="article">
    <h1>Article 7</h1>
    <div class="chart">Chart 7</div>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
      dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

Answer 5

对于 PDF（即打印），您几乎拥有它。您只需要将 height 属性更改为 100vh（而不是 max-height: 500px），然后在 @media print 媒体查询中取消设置。

.newspaper {
  height: 100vh;
}

@media print {
  .newspaper {
    height: unset;
  }
}

请注意，屏幕仍具有保持多列布局的水平滚动。因此，您可能要考虑放弃屏幕的多列布局（也就是在印刷媒体查询中移动 column-count），或者使用其他答案之一来保持屏幕的这种行为。

.newspaper {
  height: 100vh;
  column-count: 3; 
}
.article {
  break-inside: avoid;
  page-break-after: always;        
}
.chart {
  background: #ccc;
  height: 200px;
}

@media print {
  .newspaper {
    height: unset;
  }
}

 <div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 2</h1>
        <div class="chart">Chart 2</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>xxxxxxxxxx</p>
      </div>
      <div class="article">
        <h1>Article 3</h1>
        <div class="chart">Chart 3</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div class="article">
        <h1>Article 4</h1>
        <div class="chart">Chart 4</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 5</h1>
        <div class="chart">Chart 5</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 6</h1>
        <div class="chart">Chart 6</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="article">
        <h1>Article 7</h1>
        <div class="chart">Chart 7</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

这是打印预览

如何打破 CSS 中的报纸样式 3 栏布局？

How to break the newspaper style 3 column layout in CSS?

html

css

flexbox

css-grid

css-multicolumn-layout

为什么要耍花招？

诀窍

缺点/限制