Du bist auf der Suche nach der richtigen Einstellung deines Textes und möchtest, dass die Texte in Blöcken nebeneinander gesetzt werden? Lange Zeilen adé: mit dem CSS Attribut „column-count“ kannst du bestimmen, wie viele Spalten dein Text haben soll.
column-count: 3;
Wichtig dabei ist eine Größenangabe der Textbox zu definieren:
div {
width: 760px;
column-count: 3;
column-gap: 30px;
}
Das „column-gap“ gibt an, wie groß der Abstand zwischen deinen Textblöcken sein soll.
Willst du den Text immer auf der ganzen Seitenbreite angepasst haben, setzt du einfach das width auf 100%:
div { width: 100%; column-count: 2; column-gap: 2em; }
Ein Beispiel mit zwei Spalten:
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von „Letraset“, welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie „Aldus PageMaker“ – ebenfalls mit Lorem Ipsum.
div { width: 100%; column-count: 3; column-gap: 2em; }
Ein Beispiel mit drei Spalten:
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von „Letraset“, welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie „Aldus PageMaker“ – ebenfalls mit Lorem Ipsum.