为了将文本分成多列，我们使用CSS3的“column-count”属性。该属性用于将HTML元素的内容分成指定数量的列。在这里，我们将使用两个不同的示例来演示CSS的“column count”属性在2列和3列中排列文本的应用。
语法
column-count: n;
在这里，“n”是一个正整数，表示我们希望将文本排列成的列数。
Example 1
的中文翻译为：
示例 1
在这个例子中，我们将使用CSS3的“column-count”属性将“p”标签的内容分成3列。
How to arrange text in multi columns using CSS3? .para { column-count: 3; }How to arrange text in multi columns using CSS3?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.
Example 2
的中文翻译为：
示例2
在这个例子中，我们将使用CSS3的“column-count”属性将“p”标签的内容分为两列。
立即学习“前端免费学习笔记（深入）”；
How to arrange text in multi columns using CSS3? .para { column-count: 2; }How to arrange text in multi columns using CSS3?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.
结论
在这篇文章中，我们学习了“column-count”属性是什么，以及如何使用CSS3将文本排列成多列。在第一个示例中，我们通过将“column-count”属性设置为3来将文本排列成3列，在第二个示例中，我们通过将“column-count”属性设置为2来将文本排列成3列。
以上就是如何使用CSS3将文本分成多列进行排列？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625277.html
微信扫一扫 
支付宝扫一扫 
