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支持还不是太好!