首页 >web前端 >css教程 >如何使用CSS3将文本分成多列进行排列？

如何使用CSS3将文本分成多列进行排列？

WBOY转载: 2023-08-23 13:29:021195浏览

为了将文本分成多列，我们使用CSS3的“column-count”属性。该属性用于将HTML元素的内容分成指定数量的列。在这里，我们将使用两个不同的示例来演示CSS的“column count”属性在2列和3列中排列文本的应用。

语法

column-count: n;

在这里，“n”是一个正整数，表示我们希望将文本排列成的列数。

Example 1

的中文翻译为：

示例 1

在这个例子中，我们将使用CSS3的“column-count”属性将“p”标签的内容分成3列。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to arrange text in multi columns using CSS3?</title>
   <style>
      .para {
         column-count: 3;
      }
   </style>
</head>
<body>
   <h3>How to arrange text in multi columns using CSS3?</h3>
   <p class="para">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.</p>
</body>
</html>

Example 2

的中文翻译为：

示例2

在这个例子中，我们将使用CSS3的“column-count”属性将“p”标签的内容分为两列。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to arrange text in multi columns using CSS3?</title>
   <style>
      .para {
         column-count: 2;
      }
   </style>
</head>
<body>
   <h3>How to arrange text in multi columns using CSS3?</h3>
   <p class="para">
      <span>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.</span>
      <span>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.</span>
      <span>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.</span>
   </p>
</body>
</html>

结论

在这篇文章中，我们学习了“column-count”属性是什么，以及如何使用CSS3将文本排列成多列。在第一个示例中，我们通过将“column-count”属性设置为3来将文本排列成3列，在第二个示例中，我们通过将“column-count”属性设置为2来将文本排列成3列。

以上是如何使用CSS3将文本分成多列进行排列？的详细内容。更多信息请关注PHP中文网其他相关文章！

css css3 html count column

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：现代CSS卡片下一篇：CSS中的盒模型是什么？

查看更多