Heim >Web-Frontend >CSS-Tutorial >Wie ordne ich Text mit CSS3 in mehreren Spalten an?
Wie ordne ich Text mit CSS3 in mehreren Spalten an?
- WBOYnach vorne
- 2023-08-23 13:29:021195Durchsuche
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.
Grammatik
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 vonBeispiel 1
lautet:Beispiel 1
In 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>
Die chinesische Übersetzung von Beispiel 2
lautet:Beispiel 2
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>
Fazit
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!