Heim > Artikel > Web-Frontend > 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:021166Durchsuche
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!
In Verbindung stehende Artikel
Mehr sehen- Warum erscheint mein Kontextmenü in IE7 hinter der Schaltfläche?
- Warum funktioniert die vertikale Ausrichtung nicht für Inline-Block-Elemente?
- Wie navigiert man in CSS durch das Labyrinth der Hintergrundbildpfade?
- Wie schaltet -webkit-transform: translator3d(0,0,0) die Hardwarebeschleunigung für Webanimationen frei?
- Ist es zulässig, ein „“ innerhalb eines „“-Elements zu platzieren?