很长的CSS列的分节符

Question

使用CSS列，我可以将连续数据格式化为列，而不必手动将其分成多个部分。当显示复杂的动态内容时，这尤其有用。

但是，当列的内容太长以至于其高度大于视口时，将列分成几列会带来不良的阅读体验。当阅读器到达一列的底部时，他们必须手动向上滚动以开始阅读下一列。

在传统的打印版式中，通常通过将列分成可“重新启动”列的部分来缓解列很长的可读性问题。（物理页面本身形成了无休止的滚动网页所没有的自然分隔）。下图显示了水平断面如何使比视口高度长的列内容更具可读性。

（请注意，“重新启动列”是指到达左侧列部分的末尾，然后阅读该部分的右侧列，然后向下滚动以阅读下一部分的两个列。https：/ /www.shutterstock.com/image-vector/newspaper-template ...可能会更清楚地说明）。

列内容几乎没有保证。它可以包含任意数量的段落，图像，嵌套的块元素，嵌套的内联元素等。标记示例如下所示。

.columns {
  columns: 2 200px;
}
.columns * {
  max-width: 100%;
}

<div class="columns">
  <div class="introduction">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere dictum tincidunt. Cras in lectus eget libero suscipit venenatis at sit amet dolor. Donec tempor cursus justo, volutpat sodales dolor tempor eu.</p>
    <p class="a-class">Pellentesque nec tempor sapien, sed vehicula sem. Ut pretium leo eget nisi cursus viverra. Ut ultrices porta nibh, sed laoreet felis condimentum sit amet. Aliquam a felis nec urna dignissim placerat sed sit amet elit. Donec elementum sagittis purus, facilisis convallis urna dapibus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vel placerat metus. In efficitur enim eget lacinia ultrices. Duis ultricies dignissim nisi, id ultricies nulla venenatis vitae.</p>
  </div>
  <img src="https://i.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
  <div class="body" style="">
    <p>Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc. <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg" width="100"> Sed eu dapibus nulla. In ut libero sit amet elit elementum gravida. Suspendisse quis quam consequat, pretium felis vel, laoreet turpis. Proin fringilla lobortis magna. Duis quam sapien, sodales nec accumsan id, ullamcorper eget tellus. Aliquam vitae orci cursus, porttitor ligula ut, fringilla odio. Donec a lorem ac eros interdum varius ultricies quis nulla.</p>
  </div>
  <p contenteditable="true">Nunc in elit tincidunt, ultrices massa sed, ultricies elit. In nec accumsan metus. Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada.</p>
  <div style="display:none">
    <p>Curabitur sed hendrerit massa, vitae porta enim.</p>
  </div>
  <div><div><span>hey</span><div id="an-id">
    Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada. Nulla sed nisi vel nulla aliquam blandit. Nam vel tellus ut libero ultrices volutpat. Curabitur blandit quis arcu rutrum ullamcorper. Cras et pharetra augue, eget eleifend sem.
    <img src="https://socialnewsdaily.com/wp-content/uploads/2018/08/Webp.net-resizeimage-27.jpg">
  </div></div></div>
  <p>
    Mauris accumsan condimentum porttitor. Quisque tellus justo, suscipit sit amet posuere in, scelerisque nec orci. Aenean iaculis nisi in porta viverra. Sed eget ultricies nibh. Donec accumsan laoreet interdum. Donec risus mauris, dapibus et pulvinar at, posuere non nisi. Mauris at viverra nunc. Ut laoreet suscipit erat et cursus. Aenean id lacus volutpat lectus condimentum posuere. Nam ut lectus elit. Morbi sagittis elementum libero. Donec congue dolor sed tristique efficitur.
  </p>
  <p>
    <div>
      <p>Sed elementum velit sapien, et tristique justo bibendum at. Aliquam tincidunt magna nec nisi congue varius. Etiam dolor eros, rhoncus quis purus a, tempus malesuada quam. Sed bibendum condimentum eros vitae varius. Donec fermentum magna vel tellus tempus, nec finibus neque fermentum. Mauris tempus nisl sit amet lacus fermentum, at egestas urna egestas.</p>
      <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ultrices lectus vitae nisl congue, sed porta dolor luctus. Donec aliquet at sapien sit amet tincidunt. Mauris vestibulum consectetur augue at imperdiet.</p>
    </div>
  </p>
</div>

我想在列达到最大高度后自动将其分成常规部分，如上图所示。

我还没有找到以这种方式控制CSS列布局的任何属性。CSS区域看起来很有希望，但浏览器支持很差。

使用JavaScript计算内容的高度，然后为每个列块插入包装器可能是可行的，但并不理想。内容是动态的，可以随时更改，这意味着必须在每次更改时运行该功能。另外，由于子内容需要遍历分节符，因此内容可能非常复杂，因此，为每个分节天真地插入包装可能会破坏布局。

如何在最大高度之后自动设置栏目的内容的分节符？（我不喜欢CSS列的概念；也许创造性地使用flex或inline-block会得到我需要的结果）。

Answer 1

实际上，有一个使用CSS列的非常简单的解决方案。和column-span属性。

您无需输入任何内容即可完成所有这些工作，而只需对HTML标签进行样式设置即可。

基本上，“ CSS列布局”模块用于复制印刷设计布局（如报纸），其样式规则是标题应跨越故事的所有列。因此，带有的任何元素column-span: all都将分隔列，并导致换行重新设置。（请注意，示例中的颜色显示了环绕效果）。

在这种情况下，由于您不控制内容，因此最好为用户提供通用的结构。例如，我将设置H1, H2, H3标签以及<hr>一些图像来中断列。允许您的用户按照通常的书写方式来实现这些标签，您将获得一个不错的布局。但是，如果他们决定不实施任何这些东西，那取决于他们，您应该让它包装起来并引起长时间滚动。（我也可能建议提供预览，以便他们可以看到结果如何）

列跨度示例

.columns {
	margin: 30px;
	columns: 2;
}

h1, h2, h3, h4, h5 {
	column-span: all;
}



// simply to show where things wrap
h2 {
	background-color: #eee;
	padding: 5px 10px;
}

h5 {
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	text-align: center;
}

p:nth-of-type(1) {
	color: blue;
}

p:nth-of-type(2) {
	color: green;
}

p:nth-of-type(3) {
	color: orange;
}
p:nth-of-type(4) {
	color: teal;
}

<div class="columns">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis tellus non nunc tincidunt, vitae rutrum metus dapibus. Fusce at ante massa. Nam et nibh aliquet, porta nibh quis, rhoncus tortor. Aenean vestibulum neque sed urna lacinia aliquet.
		Vestibulum facilisis egestas commodo. Cras sed maximus odio. Mauris posuere, ante id posuere facilisis, ligula libero consectetur lacus, at pellentesque nibh elit at magna. Proin sollicitudin quis nibh at viverra. Duis feugiat, lorem vitae facilisis
		blandit, augue tortor cursus orci, sed porttitor eros elit at sapien. Quisque eleifend pulvinar pellentesque.
	</p>

	<h2>This is a header (h2) with column-span: all set on it</h2>

	<p>
		Donec blandit sapien leo, id aliquam purus vulputate a. Sed vel turpis ut eros suscipit blandit vel id eros. Nullam ut mauris luctus magna sollicitudin venenatis. Pellentesque leo mauris, malesuada nec purus ut, vestibulum malesuada lectus. Nullam ultricies
		tellus sapien, ut fermentum risus pretium a. Nullam magna urna, ullamcorper non congue a, efficitur nec orci. Ut aliquam molestie nisi. In at accumsan purus. Etiam non tempor ipsum. Maecenas gravida mauris in nibh vehicula ullamcorper. Sed libero lorem,
		faucibus eu lorem ut, gravida eleifend enim. Nunc vehicula fermentum consequat. Phasellus a pellentesque nisl. Nulla vel suscipit nibh, ac cursus dui. Suspendisse elementum dapibus risus. Nam egestas congue finibus.
	</p>

	<p>
		Nunc vel risus nec nulla dignissim congue. Cras sit amet lacus nec nisl mollis pellentesque in vel purus. Suspendisse efficitur mollis nibh, congue facilisis libero auctor ac. Nulla facilisi. Etiam ut erat eget erat egestas suscipit. Curabitur vitae varius
		mauris. Sed accumsan diam eros, id dapibus metus rutrum at. Nunc vitae pretium massa. Aenean quis mauris leo. Nulla egestas ligula eu libero interdum feugiat. Aliquam maximus erat et tortor auctor varius. Nulla in pharetra leo, vel suscipit nunc. Orci
		varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec egestas ante, vitae sollicitudin arcu. Pellentesque posuere tempus nibh, nec tempus eros pellentesque ac.
	</p>

	<p>
		Curabitur tempus massa dolor, nec congue purus efficitur id. Phasellus a dictum mauris. In porta nulla lectus, pretium semper erat semper id. Fusce ornare fringilla mi, ut auctor tortor semper non. Aliquam sed felis fermentum, molestie dolor vel, eleifend
		diam. Donec accumsan bibendum mi, sed pretium tortor pulvinar nec. Aliquam et metus accumsan, pretium neque eu, elementum ipsum. Nam dapibus risus sed velit viverra, non consequat nibh pretium. Morbi nec gravida turpis. Quisque convallis justo ut rhoncus
		porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
	</p>
	<h5>This is a header (h5) with column-span: all set on it</h5>
	<p>
		Proin fringilla, sapien molestie mattis commodo, leo ligula viverra massa, eget semper leo purus sit amet est. Quisque eu diam interdum, pretium dui sed, dictum sem. Sed cursus eu est in ultrices. Suspendisse eleifend imperdiet lectus eu consectetur.
		Duis semper libero nec magna commodo, sollicitudin pharetra magna luctus. Fusce pellentesque sollicitudin dolor, eu scelerisque elit condimentum vel. Curabitur id condimentum nisi, eu rhoncus arcu. Proin metus purus, condimentum nec semper vitae, blandit
		at leo. Proin commodo et ipsum ac euismod. Aliquam erat volutpat. Nam neque nisi, ornare sit amet metus ac, faucibus tempor nulla. Quisque tristique malesuada finibus. Praesent fermentum posuere urna, a blandit risus sollicitudin nec.
	</p>

</div>