Question

我有很长的文本内容，我将其插入具有column-count属性的列，如下所示：

<style>
  body {
    font-size: 14px;
    width: 297mm;
    font-family: Calibri;
  }
  div {
    width: 100%;
  }
  .text-container {
    column-count: 3;
    column-fill: auto;
    height: 120mm;
  }
</style>
<body>
<div class="text-container">
    Text line 1
    Text line 2
    Text line 3
    ...
    Text line 10,000
    ...
</div>

我试图在多列和多行（每行3列）中容纳此多行文本。另外，我想在每个新行之前添加分页符（因为我想让wkhtmltopdf在单独的页面中打印每3列。）

此图说明了默认行为（水平扩展了更多的“超过3个”溢出列），而不是我期待做的事情（将新的3列扩展到单独的行中，并在之前插入分页符属性使wkhtmltopdf在单独的页面中每三列打印一次。）

如果只有HTML / CSS解决方案（不带JavaScript），则更可取。

垂直（而不是水平）扩展溢出列（超过列数）？

0 个答案: