Text wie in Zeitung in mehreren Spalten ausgeben: Kolumnen in HTML über die CSS-Anweisung columns

HTML bietet die Möglichkeit über CSS-Anweisungen Textinhalte in Spalten auszugeben, wie man es von Zeitungen kennt. Dies hat den Vorteil, dass die Ausgabe nicht zu Breit wird und das Auge einen kürzeren Weg zur nächsten Zeile hat.

Schauen wir uns an, wie die CSS-Anweisungen aufgebaut sind und wo so die Fallstricke sind.

Wir haben in HTML einen Text mit mehreren Textblöcken, die wir in ein DIV-Bereich packen, der später in Form von Spalten (also Kolumnen) dargestellt werden soll.

<div class="spaltenausgabe">
<p>Erster Textblock mit Inhalt über mehrere Zeilen weg, damit die Anwendung von Kolumnen überhaupt einen Sinn macht und der Text unterschiedlich umbrechen kann.</p>

<p>Zweiter Textblock mit Inhalt über mehrere Zeilen weg, damit die Anwendung von Kolumnen überhaupt einen Sinn macht und der Text unterschiedlich umbrechen kann.</p>

<p>Dritter und letzter Textblock mit Inhalt über mehrere Zeilen weg, damit die Anwendung von Kolumnen überhaupt einen Sinn macht und der Text unterschiedlich umbrechen kann.</p>
</div>

Um nun für unsere Klasse .spaltenausgabe die CSS-Ausgabe für Kolumnen zu aktivieren, benötigen wir die CSS-Anweisung columns.

Damit wir farblich einen guten Überblick erhalten, bekommt jeder Absatz eine eigene Farbe zugeteilt:

* {
  box-sizing: border-box;
}

.spaltenausgabe {
  columns: 14em 3;
}
.spaltenausgabe p {
  padding: .5em;
}

.spaltenausgabe p:nth-child(1) {
  background: hsla(0, 100%, 50%, .5);
}

.spaltenausgabe p:nth-child(2) {
  background: hsla(50, 100%, 50%, .5);
}

.spaltenausgabe p:nth-child(3) {
  background: hsla(100, 100%, 50%, .5);
}

Aufbau der CSS-Anweisung columns:

Bei der CSS-Anweisung können 2 Werte angegebene werden.

columns: 14em 3;

Der erste Wert (wobei die Reihenfolge beliebig sein kann) gibt die Mindestbreite der Spalte an. Hier kann als Wert eine direkte Angabe gemacht werden oder „auto“ mitgegeben werden.

Der zweite Wert die gewünschte Anzahl der Spalten an. In unserem Beispiel sollen also 3 Spalten angezeigt werden. Auch hier kann mit dem Wert „auto“ gearbeitet werden.

Die gezeigte Anweisung ist die Kursschreibweise. Wer möchte, kann auch 2 Anweisungen schreiben. Für unser obiges Beispiel wäre das dann:

column-width: 14em;
column-count: 3;

Angabe von Abstand zwischen den Spalten über column-gap

Eine weitere CSS-Anweisung bei Kolumnen ist die Angabe der Breite zwischen den Spalten:

.spaltenausgabe {
  columns: 14em 3;
  column-gap: 2em;
}

Zwischen den Spalten eine Trennlinie über column-rule

Eine weitere CSS-Anweisung bei Kolumnen ist die Angabe für eine Trennlinie zwischen den Spalten. Diese kann die Form, Anzeigeart und Farbe mitgegeben werden. Hier ist der Aufbau gleich wie bei Rahmenlinien.

.spaltenausgabe {
  columns: 14em 3;
  column-gap: 2em;
  column-rule: thin solid black;
}

Hier haben wir die Kurzschreibweise. Möchte man mehr tippen:

  column-rule-width: thin;
  column-rule-style: solid;
  column-rule-color: black;

Problem der Umbrüche zwischen den Spalten bei columns

Die Umbrüche sind abhängig von der Breite des Anzeigefensters. Hier können wir über die Anweisung display: inline-block; unterbinden, dass in einem Block getrennt wird. Für unser obiges Beispiel ergänzen wir folgenden Bereich:

.spaltenausgabe p {
  padding: .5em;
  display: inline-block;
}