Um den Text in mehrere Spalten aufzuteilen, verwenden wir die „column-count“-Eigenschaft von CSS3. Dieses Attribut wird verwendet, um den Inhalt eines HTML-Elements in eine angegebene Anzahl von Spalten zu unterteilen. Hier werden wir anhand zweier verschiedener Beispiele die Anwendung der CSS-Eigenschaft „column count“ zum Anordnen von Text in 2 und 3 Spalten demonstrieren.
column-count: n;
Hier ist „n“ eine positive ganze Zahl, die die Anzahl der Spalten angibt, in denen der Text angeordnet werden soll.
Die chinesische Übersetzung vonIn diesem Beispiel verwenden wir die CSS3-Eigenschaft „column-count“, um den Inhalt des „p“-Tags in drei Spalten aufzuteilen.
<!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>
In diesem Beispiel verwenden wir die CSS3-Eigenschaft „column-count“, um den Inhalt des „p“-Tags in zwei Spalten aufzuteilen.
<!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 diesem Artikel haben wir erfahren, was die Eigenschaft „column-count“ ist und wie man Text mit CSS3 in mehreren Spalten anordnet. Im ersten Beispiel ordnen wir den Text in 3 Spalten an, indem wir die Eigenschaft „column-count“ auf 3 setzen, und im zweiten Beispiel ordnen wir den Text in 3 Spalten an, indem wir die Eigenschaft „column-count“ auf 2 setzen.
Das obige ist der detaillierte Inhalt vonWie ordne ich Text mit CSS3 in mehreren Spalten an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
