css3 column-count属性将文本拆分成几列笔记

原创 国哥笔记  2018-11-10 15:31  阅读 761 views 次

column-count属性定义及用法

在css中,column-count属性是用来将元素中的内容拆分成指定的列数(多列布局)。当我们想让一个元素中的文字内容多列显示,就可以使用该属性来实现,相对于使用div浮动布局来实现简单的很多。

column-count属性只有一个属性值,用于指明元素应分为的列数,可以为数字或auto。数字代表元素应分为的列数;auto代表元素应分为的列数取决于其他属性(如:column-width属性)。

column-count属性语法格式

  1. column-count: number / auto;(例:column-count:3;)
  2. JavaScript语法: object.style.columnCount=3;

column-count属性值说明

  • number:数值(如:1,2,3,....),定义列数;
  • auto :根据元素的其它属性确定列数;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 column-count属性将文本拆分成几列笔记</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;}
.column{column-count:3;}
</style>
</head>
<body>
<div class="column">column-count:3;演示,这段文字将被拆分成三列,为了显示效果,就在这里啰嗦几句,哈哈哈,嘻嘻嘻,呵呵呵!</div>
</body>
</html>

运行结果:

css3 column-count属性将文本拆分成几列笔记

非常相关
总结

column-count属性虽然不常见,但是还是挺有用的,在一些布局中,可以让你少写一些代码,节约你宝贵的时间。

column-count属性在一些浏览器或早期版本的浏览器可能还不支持,需要添加一些前缀用于浏览器识别才能支持(如:-webkit-column-count、 -ms-column-count、-moz-column-count)。由于没有安装太多的浏览器在这就不测试了,有兴趣的朋友可以自己测试一下。

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/column-count.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情