columns 字符分割

这个属性主要用来对字符进行横向分割排版,例如报纸的版面。

1. 官方定义

columns属性是一个简写属性,用于设置列宽和列数。

2. 慕课解释

columnscolumn-width每列宽度,column-count 每列的列数这两个属性的缩写,当列宽和列数的乘积大于元素的宽度时候就不会在分开自动合成一列。当他们的乘积小于元素的外宽的时候,每列的实际宽度可能大于column-width 设定的值。

3. 语法

使用 columns 时候

.demo{
    columns: column-width column-count;
}
描述
column-width 宽度 px|rem|em
column-count 数字代表分的列数

单独使用时候:

.demo{
    column-count:number;
    column-width:value
}

另外 colunms 还有其他的补充属性:

    column-gap:<length> | normal

设置列与列之间的距离:

column-gap:<length> | normal

设置列与列之间的边线:

column-rule:[ column-rule-width ]  [ column-rule-style ]  [ column-rule-color ]

内部元素是否允许横跨所有的列:


column-span:none | all

描述
none 不允许子元素单独一行
all 指定子元素单独一行

列的高度是否统一:

column-fill	:auto | balance
描述
auto 自适应高度也就是它们有不同的高度。
balance 以最高的子元素为统一高度

这个属性兼容性极差,除了火狐支持外其它浏览器均不在支持了。

4. 兼容性

IE Edge Firefox Chrome Safari Opera ios android
9+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4

5. 实例

  1. 对一段文本分两列每列宽度不小于 200px。
.demo{
    -webkit-columns:200px 2;
}

效果图

图片描述

对一段文本分两列每列宽度不小于 200px效果图
实例演示
预览 复制