javascript - 非常长的 CSS 列的分节符

Question

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

然而，当列的内容太长以至于它们的高度大于视口(viewport)时，分成列会导致阅读体验不佳。当读者到达一栏的底部时，他们必须手动向上滚动才能开始阅读下一栏。

在传统的打印布局中，很长的列的可读性问题通常可以通过将列分成“重新启动”列的部分来缓解。 (物理页面本身形成了无休止滚动网页所没有的自然分离)。下图显示了水平分节符如何使长于视口(viewport)高度的柱状内容更具可读性。

(请注意，“重新开始列”的意思是，一旦您到达左侧列部分的末尾，您就可以阅读该部分的右侧列，然后向下滚动以阅读下一部分的两列。 https://www.shutterstock.com/image-vector/newspaper-template... 可能会说明得更清楚)。

专栏内容的保证很少。它可能包含任意数量的段落、图像、嵌套 block 元素、嵌套内联元素等。示例标记如下所示。

.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 计算内容的高度，然后为每个列 block 插入包装器可能是可行的，但并不理想。内容是动态的，随时可能发生变化，这意味着必须在每次更改时运行该功能。此外，内容可能非常复杂，子元素需要遍历分节符，因此天真地为每个部分插入包装器可能会破坏布局。

如何在最大高度后自动为分栏内容设置分节符？ (我不喜欢 CSS 列的想法；也许创造性地使用 flex 或 inline-block 会给出我需要的结果)。

Answer 1

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

您无需向内容中注入(inject)任何内容并简单地设置 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>