Home > Article > Web Front-end > How to arrange text into multiple columns using CSS3?
How to arrange text into multiple columns using CSS3?
- WBOYforward
- 2023-08-23 13:29:021174browse
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;
Here, "n" is a positive integer, indicating the number of columns we want the text to be arranged into.
The Chinese translation ofExample 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>
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>
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!