How to arrange text into multiple columns using CSS3?-CSS Tutorial-php.cn

How to arrange text into multiple columns using CSS3?

WBOY

Release： 2023-08-23 13:29:02

forward

1181 people have browsed it

How to arrange text into multiple columns using CSS3?

To split the text into multiple columns, we use the CSS3 "column-count" property. This attribute is used to divide the content of an HTML element into a specified number of columns. Here we will use two different examples to demonstrate the application of CSS’s “column count” property to arrange text in 2 and 3 columns.

grammar

column-count: n;

Copy after login

Here, "n" is a positive integer, indicating the number of columns we want the text to be arranged into.

The Chinese translation of

Example 1

is:

Example 1

In this example, we will use the CSS3 "column-count" property to divide the content of the "p" tag into 3 columns.

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

Copy after login

The Chinese translation of

Example 2

is:

Example 2

In this example, we will use the CSS3 "column-count" property to divide the content of the "p" tag into two columns.

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

Copy after login

in conclusion

In this article, we learned what the “column-count” property is and how to arrange text into multiple columns using CSS3. In the first example we are arranging the text into 3 columns by setting the "column-count" property to 3 and in the second example we are arranging the text by setting the "column-count" property to 2 into 3 columns.

The above is the detailed content of How to arrange text into multiple columns using CSS3?. For more information, please follow other related articles on the PHP Chinese website!