CSS3 Multiple Columns & Column Breaks

2014-11-13 白若水更多博文 » 博客 » GitHub »

原文链接 http://inskyline.com/html5/2014/11/13/a-HTML5-csscolumn.html
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

用 CSS3可以像报纸一样对文本多列排版。其中主要属性有：

column-count 具体列数
column-gap 列与列之间的距离
column-rule 设置列于列宽之间的样式（包括颜色、分割线等）

如下示例，排版为3列，列之间间隔为40px,有4px粗的绯红色线分割。

.newspaper {
    -webkit-column-count: 3;  /* Chrome, Safari, Opera */
    -moz-column-count: 3;  /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px;   /* Chrome, Safari, Opera */
    -moz-column-gap: 40px;  /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

其中column-rule包含一些其他相关属性，具体查看CSS3 column-rule Property

用以上的方式可以实现分栏显示，但会遇到整段内容被笨拙的分割跨列。如示例第4段的情况，本来完整的内容本被强制的拆分到另一栏。

当然了 W3C组织也不会让这种事情发生，因而出现了column-break 参考地址 CSS column break properties

通过如下修改就可以完美的解决

ol li{
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}

目前各个浏览器对column-break的表现形式还不相同。在Chrome下，内容逐条分栏，多出的内容在最后一栏完全显示。而Safari则将多出的内容截断（也是逐条分栏）。Firefox则是第一栏显示完整后，在将后面内容分到其他栏。而IE支持还不是太好！