column-break-before

语法：

默认值：auto

适用于：块级元素

继承性：无

动画性：否

计算值：指定值

取值：

auto：: 既不强迫也不禁止在元素之前断行并产生新列
always：: 总是在元素之前断行并产生新列
avoid：: 避免在元素之前断行并产生新列

说明：

设置或检索对象之前是否断行。

对应的脚本特性为columnBreakBefore。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Blackberry Browser	Opera Mobile	Chrome for Android	Firefox for Android	IE Mobile	UC Browser for Android	Samsung Internet	QQ Browser	Baidu Browser
5.5-9	12+	2-51 ^-moz-	4-49 ^-webkit- #1	3.1-6.1 ^-webkit- #1	9-11	3.2-6.1 ^-webkit- #1	2.1-4.4.4 ^-webkit- #1	7-10 ^-webkit- #1	10-11	61	56	10+	11.4 ^-webkit- #1	4 ^-webkit- #1	1.2	7.12
10+		52+	50+	7-8 ^-webkit-	11.1-50	7.0-8.4 ^-webkit-			11.1+					5
10+		52+	50+	9+	15-36 ^-webkit- #1	9.0+			11.1+					5

Firefox可使用page-break-before替代

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>column-break-before_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
body{font:14px/1.5 georgia,serif,sans-serif;}
.test p,.test div{margin:0;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
	width:600px;
	border:10px solid #000;
	-moz-column-count:4;
	-moz-column-gap:20px;
	-moz-column-rule:3px solid #090;
	-webkit-column-count:4;
	-webkit-column-gap:20px;
	-webkit-column-rule:3px solid #090;
	column-count:4;
	column-gap:20px;
	column-rule:3px solid #090;
}
.test div{
	-moz-column-break-before:always;
	-webkit-column-break-before:always;
	column-break-before:always;
}
</style>
</head>
<body>
<h1>column-break-before:always</h1>
<div class="test">
	<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</p>
	<div>不管上一列有没有填满，我都另起一列</div>
	<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</p>
</div>
</body>
</html>