javascript - 我可以在 CSS 多列布局中设置分栏符吗？

Question

我有一大段文字流入 CSS 多列布局，使用 CSS hyphening 拉伸(stretch)两列、三列或四列。 .在某些时候，该栏的一个文本需要提前结束，以便让该段落的其余部分从第二栏的顶部开始。

有什么方法可以让我们简单地设置一个<column-break>在下一栏的顶部开始其余文本？

目前我正在用大量 <br> 填充该列(需要分栏符) s 将 HTML 中的列加长以达到效果。

此外，每当任何一列中的内容发生变化时，<br> 的数量都会增加。馅料不足，需要重新评估。

#multicolumn{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    
}

<div id="multicolumn">FIRST paragraph orem 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.
<br>
<br>
<br>
<br>
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

See my JSFiddle .

有没有办法优雅地“结束”第一列并告诉浏览器开始下一列中的其余内容？

Answer 1

5. Column breaks

When content is laid out in multiple columns, the user agent must determine where column breaks are placed. The problem of breaking content into columns is similar to breaking content into pages.

Three new properties are introduced to allow column breaks to be described in the same properties as page breaks: ‘break-before’, ‘break-after’, and ‘break-inside’. These properties take the same values as ‘page-break-before’, ‘page-break-after’, and ‘page-break-inside’ [CSS21]. In addition, some new keyword values are added.

These properties describe page/column break behavior before/after/inside the generated box. These values are normatively defined in [CSS21]:

• auto: Neither force nor forbid a page/column break before (after, inside) the generated box.
• always: Always force a page break before (after) the generated box.
• avoid: Avoid a page/column break before (after, inside) the generated box.
• left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.
• right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.

This specification adds the following new values:

• page: Always force a page break before (after) the generated box.
• column: Always force a column break before (after) the generated box.
• avoid-page: Avoid a page break before (after, inside) the generated box.
• avoid-column: Avoid a column break before (after, inside) the generated box.

因此，你可以使用类似的东西

#multicolumn {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
.column {
  break-before: column;
  break-after: column;
}

<div id="multicolumn">
  <div class="column">FIRST paragraph orem 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.</div>
  <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>

但是，似乎只有 Internet Explorer 10+ 和 Opera 11.10-12.1 支持这些属性。