Column

前言生成PDF有很多种方案，现在只讨论用jspdf加html2canvas生成多页PDF时，相信用过的人也遇到如果文字或图片卡在分页位置处被无情裁断的问题。再次之前先简单介绍下我们用于解决问题的属性。 Columns 属性介绍columns:100px 3; //每列多少宽度 分多少列 也就是：column-count:3 // 分多少列column-width: 100px //每列多少宽度 column-fill: auto; //列排序充列 //默认是balance 就是代表尽量平均的内容； auto会设置成填满 往后铺 column-gap:40px; //设置列之间的间隔column-rule:4px outset #ff6430; //列与列之间的分隔线 宽度 线类型 颜色 也就是：column-rule-width //列与列之间的分隔线 宽度column-rule-style //列与列之间的分隔线 类型column-rule-color //列与列之间的分隔线 颜色 column-count:3; //分成多少列column-fill: auto; //列排序充列 默认是balance 就是代表尽量平均的内容； auto会设置成填满 往后铺 column-gap:40px; //列与列之间的距离column-rule:4px outset #ff6430; // 列与列之间的分隔线在线写html 可以过去试试：https://www.runoob.com/try/tr... 浏览器的兼容兼容截止我编写时间2019.09.07 实际应用：好，现在重新回到我们的问题。这个问题是很正常的，事关我们是用画布截图然后放进去PDF里面，而画布只会根据高度够了就截一张，它是不会去监控那个问题是不是刚好卡在字体或图片的中间呢~ 例如： 我前阵子也遇到相同的问题，我这边的解决方法是，舍弃截图从上往下截的截图： 方案： 改用在排版时就已经分页排版好，除了封面外，其它时间页头页脚浮动是页面上方，截图是一页一页的截，这样好处是前端能清晰掌握整个过程和排版甚至是分页的计算。【采用】 那么如果能解决按每页的排呢？？？ 条件发射解决方法：循环页面元素，计算该元素是否刚好卡在一页的高度位置，如果是， 那么我们把它后面的就不显示了，或者插入个分页结束符等； 很明显这个是行不通的。 一方面是：因为整个document下来 元素很多 大量循环所有的元素来监控也很不科学； 另一方面：现在这种基于dom结构渲染完了 ，生插一个标签的结束符。例如</div>这种，也是算不清有多少个种类不同的结束符； 所以这很明显是个错误示范 我们停止对于这边的思考。 ...

原文：When And How To Use CSS Multi-Column Layout作者：Rachel Andrew译者：博轩当我们把注意力都放在 CSS Grid 布局和 CSS Flexbox 布局的时候，经常忽略了另一种布局方法。在本文中，我将介绍多列布局 - 通常称为 multicol 或者 “CSS Columns” 。通过这篇文章，你了解到使用 columns 的最佳实践，以及一些使用 columns 的注意事项。 什么是Multicol？multicol 的基本思想是，你可以把一大块内容带到多个列中，就像报纸一样。您可以使用两个属性中的其中一个来完成此操作。您可以使用 cloumn-count 属性来指定内容的列数。还可以使用 column-width 属性来指定理想的列宽，让浏览器来决定合适的列数。 不论你的内容包含什么样的元素，当你将它转换为多列布局时，一切都将保持正常的内容流，但是将以列的形式展现。这使得 multicol 布局与如今在浏览器中常见的其他布局会有所不同。例如 Flexbox 和 Grid，获取容器元素中子元素，让这些子元素参与到 flex 和 grid 的布局中来。使用 multicol ，在每一列的内部，您还可以获得正常的内容流。 在下面的例子中，我们正在使用 column-width，最小列宽为 14em 。Multicol 会尽可能多的分配宽度为 14em 的列，然后，让每一列分享剩余的空间。每一列的宽度至少 14em ，除非，容器的宽度小于 14em ，那么将只展示一列。multicol 也是 CSS 中首次出现的一种行为，可以创建出列，同时也默认符合响应式的规则。您不必增加 CSS 查询条件 (Media Queries) ，修改每一个断点的列数，而是制定一个最佳的宽度，让浏览器自身来进行处理。 示例链接 // 核心代码摘录.container { max-width: 800px; margin: 0 auto; column-width: 14em;}列样式当你使用列属性（columns）来创建布局的时候，cloumns box 中的内容将无法定位。您无法使用 JavaScript 来进行定位，您也无法为单个列来指定唯一的样式，比如背景颜色，外边距，内边距等等。所有 column boxes 将保持相同的大小。你唯一可以做的事情，就是使用 column-rule 属性来添加列之间的规则，该属性的作用类似于 border。您还可以使用 column-gap 属性控制列之间的间隙，该属性的默认值为 1em ，但是您还可以将其改为任何有效的长度单位。 ...