column-count
CSS
property breaks an element's content into the specified number of columns.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* Keyword value */ column-count: auto; /* <integer> value */ column-count: 3; /* Global values */ column-count: inherit; column-count: initial; column-count: unset;
auto
column-width
.
<integer>
<integer>
describing the ideal number of columns into which the content of the element will be flowed. If the
column-width
is also set to a non-
auto
value, it merely indicates the maximum allowed number of columns.
| 初始值 |
auto
|
|---|---|
| 适用于 | Block containers except table wrapper boxes |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | an integer |
<integer> | auto
<p class="content-box"> This is a bunch of text split into three columns using the CSS `column-count` property. The text is equally distributed over the columns. </p>
.content-box {
column-count: 3;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Multi-column Layout Module
The definition of 'column-count' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
column-count
|
Chrome 完整支持 50 | Edge 完整支持 12 |
Firefox
完整支持
52
|
IE 完整支持 10 | Opera 完整支持 11.1 | Safari 完整支持 9 | WebView Android 完整支持 50 | Chrome Android 完整支持 50 |
Firefox Android
完整支持
52
|
Opera Android 完整支持 11.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 5.0 |
完整支持
见实现注意事项。
要求使用供应商前缀或不同名称。