如何使用CSS3在多列中排列文本

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

语法

column-count: n;

在这里，”n”是正整数值，代表我们想要将文本排列成的列数。

示例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>

示例2

在这个示例中，我们将使用CSS3的“column-count”属性，将一个

标签的内容分为两列。

<!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>