如何使用 CSS3 将文本排列成多列?

cssweb developmentfront end technology更新于 2025/1/24 3:24:17

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

语法

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"属性将"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>