5. Column breaks

Question

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

我们有什么方法可以设置<column-break>来启动下一列顶部的其他文字吗？

目前，我正在使用大量<br>填充列（需要使用列分隔符）以延长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

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

引入了三个新属性以允许列分隔符   在与分页符相同的属性中描述：'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-inside CSS属性来实现。 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>

Answer 3

使用<p>标记来区分段落。

<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>
<div id="filler"></div>
<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>

和CSS

@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;

}

#filler {
float: left;
position: relative;
background-color: #f00;
height: 120px;
width: 50%;

http://jsfiddle.net/mnz2h9hr/2/

<p>标记将段落保持在一起，并且＆＃39;填充＆＃39; （标记为红色）保留一个没有文字的区域。

Answer 4

根据您的情况，最佳解决方案是使用网格系统。请在整页视图中运行代码段。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
 <div class="col-sm-6" style="background-color:lavenderblush;">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="col-sm-6" style="background-color:lavender;">
        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>
  </div>
</div>

</body>
</html>

＆＃13;

Answer 5

如果你能够在div中包装每一列，那么最优雅的解决方案是使用bootstrap样式网格。

    .row {
      margin: 0 -15px;
    }
    .column {
      box-sizing: border-box;
      float: left;
      padding: 0 15px;
      width: 50%;
    }

<div id=row">
  <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>

如果您使用的是wysiwyg来输入副本，那么您必须有权访问源按钮以将列包装在div中。然后使用上面的代码，列变得非常简单;并且很容易做出回应。

Answer 6

详细说明@Oriol答案，您可以设置宽度，因此第一列将始终使用左半部分。

＆＃13;

#multicolumn {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

.column:nth-of-type(1) {
 width:50%;
}

＆＃13;

<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>

＆＃13;

Answer 7

从技术上讲，不是您要定位到列中断的CSS多列功能，但这在视觉上看起来很相似。

.column {
   width : 46%;
   margin: 0% 2%;
   height: 100%;
   float: left;
}

<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>

这是jsFiddle：http://jsfiddle.net/Vbr9d/242/

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

7 个答案:

5. Column breaks