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

Question

我有一段很大的文本流入CSS多列布局,例如,使用CSS hypening扩展两列,三列或四列.在某些时候,列的文本之一需要提前结束,以便允许段落的其余部分从第二列的顶部开始.

有没有办法我们可以简单地设置一个<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>

看我的JSFiddle.

有没有办法优雅地"结束"第一列并告诉浏览器在下一列中启动其余内容？

Answer 1

5.分栏

当内容布置在多个列中时,用户代理必须确定放置列中断的位置.将内容分成列的问题类似于将内容分解为页面.

引入了三个新属性,允许在与分页符相同的属性中描述分栏:' break-before ',' break-after '和' break-inside '.这些属性采用与'page-break-before','page-break-after'和'page-break-inside' [CSS21]相同的值.此外,还添加了一些新的关键字值.

这些属性描述生成的框之前/之后/之内的页/列中断行为.这些值在[CSS21]中规范地定义:

• auto:既不强制也不禁止在生成的框之前(之后,之内)打破页面/列.
• always:始终在生成的框之前(之后)强制分页.
• avoid:避免在生成的框之前(之后,之内)中断页/列.
• left:在生成的框之前(之后)强制执行一个或两个分页符,以便将下一页格式化为左页.
• right:在生成的框之前(之后)强制执行一个或两个分页符,以便将下一页格式化为右页.

此规范添加了以下新值:

• page:始终在生成的框之前(之后)强制分页.
• column:始终在生成的框之前(之后)强制执行分栏.
• avoid-page:避免在生成的框之前(之后,之内)分页.
• avoid-column:避免在生成的框之前(之后,之内)进行列分隔.

因此,您可以使用类似的东西

#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似乎支持这些属性.

Answer 2

解决这个问题的一种方法是实际将文本包装在段落(p标签)中,就像你应该为语义做的那样,并且不允许你的第二段断开,因为它永远不会超过1列.

这可以通过使用break-insideCSS属性来实现. https://developer.mozilla.org/en/docs/Web/CSS/break-inside

基于您的代码段的代码示例:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
 #multicolumn {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}
p {
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 0 0 1.4em;
}
p:nth-of-type(2) {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
 

<div id="multicolumn">
  <p>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.</p>
  <p>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.</p>
</div>