Wie kann ich einen mehrspaltigen Textüberlauf nur mit CSS erstellen?

Mehrspaltigen Textüberlauf mit CSS erstellen

Bei der Webentwicklung kommt es häufig vor, dass Text in mehreren Spalten angezeigt werden muss. Diese Anordnung, die an Zeitungslayouts erinnert, verbessert die Lesbarkeit und spart Platz.

Verwendung von CSS für mehrspaltigen Textüberlauf

Glücklicherweise können Sie diesen mehrspaltigen Effekt allein mit CSS erreichen, ohne Rückgriff auf mehrere Divs. Das folgende Code-Snippet zeigt, wie:

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

In diesem Code:

• column-count legt die Anzahl der gewünschten Spalten fest. In diesem Beispiel ist es auf 3 eingestellt.
• column-gap definiert den Abstand zwischen Spalten. Hier wird eine Lücke von 10 Pixeln angegeben.
• column-rule fügt einen Rahmen zwischen den Spalten hinzu. In diesem Fall handelt es sich um einen 1 Pixel großen schwarzen Rand.

Wenden Sie die Multi-Klasse auf jedes Div an, bei dem Sie den Mehrspalteneffekt wünschen. Zum Beispiel:

<div class="multi">
  <p>Today in Wales, someone actually did something interesting.</p>
  <p>Nobody was harmed in the incident, although one elderly victim is receiving counselling.</p>
</div>

Mit dieser reinen CSS-Lösung können Sie Text dynamisch in mehreren Spalten anzeigen und so an unterschiedliche Bildschirmgrößen oder Browserfensterbreiten anpassen.

Das obige ist der detaillierte Inhalt vonWie kann ich einen mehrspaltigen Textüberlauf nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!