CSS INTENSIVSTATION

Text-Umbruch

Text-Umbruch in CSS zu kontrollieren ist wichtig für eine gute Lesbarkeit und ein sauberes Layout. Hier sind die wichtigsten CSS-Eigenschaften für Textumbrüche.

hyphens

hyphens steuert die automatische Silbentrennung mit Bindestrichen. Das verbessert Blocksatz und verhindert extreme Lücken.

  • noneKeine automatische Silbentrennung
  • manualNur an manuellen Trennstellen (­)
  • autoAutomatische Silbentrennung (benötigt lang-Attribut)

Beispiel:

hyphens: auto

Donaudampfschifffahrtsgesellschaftskapitän und Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz sind sehr lange deutsche Wörter.

.text {
  hyphens: auto
}
<html lang="de">...</html>

Wichtig: Silbentrennung funktioniert nur, wenn die Sprache im HTML korrekt gesetzt ist, über das lang Attribut.

word-break

word-break bestimmt, wie Wörter am Zeilenende umbrechen sollen.

  • normalStandard-Verhalten: Umbruch nur an Leerzeichen
  • break-allBricht Wörter überall, auch mitten im Wort
  • keep-allVerhindert Umbruch in asiatischen Sprachen
  • break-wordVeraltet, verwende stattdessen overflow-wrap

Beispiel:

word-break: break-all

DasisteinextremlangeszusammengesetzteswortohneLeerzeichenundesmussumbrochenwerdenumesindieBoxzupassen.

.text {
  word-break: break-all;
}

overflow-wrap (word-wrap)

overflow-wrap (früher word-wrap) bestimmt, ob lange Wörter umgebrochen werden dürfen, wenn sie nicht in die Zeile passen.

  • normalWörter brechen nicht, können überlaufen
  • break-wordLange Wörter werden umgebrochen, wenn nötig
  • anywhereWie break-word, aber berücksichtigt auch weiche Umbrüche

Beispiel:

overflow-wrap: break-word

Hier ist eine URL: https://www.beispiel-website.de/sehr/langer/pfad/zu/einer/datei.html 

.text {
  overflow-wrap: break-word;
}

white-space

white-space kontrolliert, wie Leerzeichen und Zeilenumbrüche behandelt werden.

  • normalMehrfach-Leerzeichen ignoriert, automatischer Umbruch
  • nowrapMehrfach-Leerzeichen ignoriert, kein automatischer Umbruch
  • preLeerzeichen/Umbrüche bleiben erhalten, kein automatischer Umbruch
  • pre-wrapLeerzeichen/Umbrüche bleiben erhalten, mit automatischem Umbruch
  • pre-lineUmbrüche bleiben erhalten, Mehrfach-Leerzeichen ignoriert, mit automatischem Umbruch

Beispiel:

white-space: nowrap mit ellipsis

Dieser sehr lange Text wird nicht umgebrochen und zeigt stattdessen drei Punkte am Ende

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: pre

Dieser Text behält alle Leerzeichen und Zeilenumbrüche!

.white-space-pre {
    white-space: pre;
}

text-overflow

text-overflow bestimmt, wie überlaufender Text angezeigt wird (nur mit white-space: nowrap und overflow: hidden).

  • clipText wird einfach abgeschnitten
  • ellipsisZeigt drei Punkte (...) am Ende

Beispiel:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

Donaudampfschifffahrtsgesellschaftskapitän und Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz sind sehr lange deutsche Wörter. 

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Wichtig: text-overflow funktioniert nur, wenn alle drei Eigenschaften gesetzt sind:

ASCII-Art mit white-space: pre

Zum Abschluss ein kleines Beispiel, wie white-space: pre für ASCII-Art verwendet werden kann. Das <pre> Tag setzt automatisch white-space: pre — das ist sein Standard-Verhalten.

    ( (
     ) )
  ........
  |      |]
  \      /
   `----'

Zeit für eine kleine Kaffeepause.

(_)_ __ | |_ ___ _ __  ___(_)_   _____| |_ __ _| |_(_) ___  _ __  
| | '_ \| __/ _ \ '_ \/ __| \ \ / / __| __/ _` | __| |/ _ \| '_ \ 
| | | | | ||  __/ | | \__ \ |\ V /\__ \ || (_| | |_| | (_) | | | |
|_|_| |_|\__\___|_| |_|___/_| \_/ |___/\__\__,_|\__|_|\___/|_| |_|
                                                                  

.ascii-art {
  white-space: pre;
  font-family: monospace;
  font-size: clamp(8px, 2vw, 16px); /*  Mobile klein, Desktop grösser */
  overflow-x: auto; /* Falls es zu breit wird */
}

Kurz gesagt

  • word-break → Wie Wörter umbrechen (break-all = überall)
  • overflow-wrap → Ob lange Wörter umbrechen dürfen (break-word = ja)
  • white-space → Wie Leerzeichen behandelt werden (nowrap = kein Umbruch)
  • hyphens → Automatische Silbentrennung (auto = einschalten)
  • text-overflow → Was bei Überlauf passiert (ellipsis = ...)

See the Pen Text-Umbruch Spielwiese by Intensivstation (@intensivstation) on CodePen.