HTML | DOM 样式 columnCount 属性

columnCount 属性用于定义一个元素应该被分成的列数。

语法

column-count: auto|number|initial|inherit;

• auto：自动计算列数。
• number：指定元素应该分成的列数。
• initial：将该属性设置为默认值 auto。
• inherit：从父元素继承该属性的值。

实例

<style>
  .column-div {
    column-count: 3;
  }
</style>

<div class="column-div">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla elit non vehicula tempus. Donec a mauris dapibus, fermentum eros at, commodo risus. In eget laoreet ligula. Fusce laoreet ante in ullamcorper rutrum. Sed vel leo consequat, mollis quam vitae, imperdiet est. Nullam iaculis quam eu magna pharetra viverra. Mauris nec justo nec mi tristique sollicitudin.</p>
  <p>Donec condimentum purus eget aliquam finibus. Vestibulum venenatis urna vel tellus lobortis, sed gravida lorem diam vitae mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam vel odio in velit fermentum pulvinar. Duis nec lacus nisl. Nunc eget sem in tellus vehicula tincidunt. Sed ac nunc ac enim dictum dignissim. Morbi sed consectetur turpis. Etiam volutpat ligula mauris, ac tempor libero fermentum a. Cras adipiscing purus non velit laoreet, in mattis elit feugiat. Fusce magna mi, ullamcorper lobortis orci eu, bibendum efficitur erat.</p>
  <p>Vestibulum nulla nibh, eleifend eget mattis ac, ultrices vel ante. Sed sagittis consequat elit at faucibus. Quisque commodo leo vel justo facilisis eleifend ut sed sapien. Fusce odio quam, lacinia non ante et, consequat porta turpis. Donec consectetur non orci quis porta. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pulvinar tincidunt lectus, at pharetra arcu malesuada eu. Pellentesque eget neque ex. Aenean elit turpis, bibendum in massa in, egestas tempor odio.</p>
  <p>Nullam feugiat vitae mi a elementum. Pellentesque ullamcorper, sapien a consequat consectetur, est orci venenatis sapien, id blandit dolor mi vel enim. Nullam consequat leo at mauris ornare accumsan. Fusce viverra in massa sit amet egestas. Fusce ullamcorper, ipsum vitae porttitor ullamcorper, mi dolor laoreet mauris, eget bibendum dolor dui in mi. Aliquam pulvinar nisl eu magna vestibulum, eu mattis mi malesuada. Quisque sagittis rutrum est a feugiat. Praesent ante dui, maximus ut porta non, bibendum eu lectus. Nam eu volutpat mauris. Donec eget aliquam nulla, ac imperdiet sapien. Sed pharetra turpis ac velit venenatis tristique. Suspendisse pharetra, ante sed egestas mattis, tellus leo tempus lorem, sit amet interdum nisi magna ut nibh.</p>
  <p>Sed eget ullamcorper velit. Fusce porta libero nisi, eu efficitur libero consequat sed. Vivamus eget augue vitae tortor pharetra luctus a quis ex. Nullam ac justo molestie, consectetur lacus in, viverra velit. Aliquam commodo mauris id enim eleifend hendrerit. Praesent molestie interdum mauris, a elementum ligula mattis id. Ut ut ullamcorper nibh. Phasellus hendrerit ullamcorper libero, sit amet ultrices metus varius at. Maecenas tincidunt nulla a purus tempus laoreet vel eu lacus. Suspendisse dolor odio, varius vel justo non, pulvinar consequat libero. Donec mi ante, ullamcorper quis sagittis vel, eleifend eu lacus. Nam tristique auctor ante ac condimentum. Nam auctor luctus massa ut facilisis. Ut tempus elit ut risus ornare, in semper urna consequat.</p>
</div>

该示例代码创建了一个具有 `column-count: 3` 样式的 `div` 元素，该元素被分成了三列。文本内容随着屏幕宽度自动调整列数，这在多列布局中非常方便。

浏览器支持情况

该属性被现有的主流浏览器支持，包括 IE 10 及更高版本。

注意事项

• 当使用 column-count 属性时，需要对文本流进行控制。可以使用 overflow: hidden 或 overflow: auto 使文本在可视区域内截断。
• 该属性只适用于块级元素，不能应用于行内元素。
• column-count 属性将无法正确运行在 IE9 及以下版本的浏览器上。