Websiteentwicklung: CSS: Textumbruch

Mit der Eigenschaft white-space kann festgelegt werden, wie mit Leerzeichen und Zeichen für Zeilenumbrüche umgegangen werden soll. Dies bezieht sich hauptsächlich auf die Frage, ob mehrere aufeinanderfolgende Leerzeichen und Zeilenumbrüche vor der Präsentation zu einem Leerzeichen zusammengefaßt werden sollen oder wenn nicht, ob auch Zeichen für Zeilenumbrüche Zeilenumbrüche in der Präsentation bewirken sollen oder auch nicht oder ob automatische Zeilenumbrüche stattfinden sollen oder nicht.

Mögliche Werte sind:

'inherit' - geerbt.
'normal' - mehrere Leerzeichen und Zeilenumbruchszeichen hintereinander werden zu einem Leerzeichen zusammengefaßt, gegebenenfalls erfolgt ein automatischer Zeilenumbruch; der Initialwert.
'nowrap' Zusammenfassung von Leerzeichen und Zeilenumbruchszeichen wie bei 'normal', aber es erfolgt kein automatischer Zeilenumbruch.
'pre' - Zeilenumbruch wird wie im Quelltext angegeben angezeigt; Leerzeichen werden nicht zusammengefaßt.
'pre-line' - ähnlich wie bei 'normal' werden Leerzeichen zusammengefaßt, allerdings werden zusätzlich Zeilenumbrüche wie im Quelltext angegeben angezeigt (in CSS2.0 nicht vorhanden).
'pre-wrap' - ähnlich wie bei 'pre' bleiben Leerzeichen und Zeilenumbrüche erhalten, gegebenenfalls erfolgt ein automatischer Zeilenumbruch (in CSS2.0 nicht vorhanden).

Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Beispiele:

p {
  max-width: 20em;
  white-space: nowrap
}

Dieser Text wird immer in einer Zeile dargestellt,
egal wie klein der zur Verfügung stehende Platz ist.
Eher wird ein horizontaler Rollbalken angezeigt oder der Text steht über.
Die Box ist mit einem Rahmen gekennzeichnet,
Zeilenumbrüche werden mit dem Element br erreicht.

p {
  max-width: 20em;
  white-space: pre
}

Dieser             Text wird wie im Quelltext notiert dargestellt.
Aufeinanderfolgende                 Leerzeichen bleiben erhalten.
                   Zeilenumbrüche bleiben erhalten.
Die Box ist mit einem Rahmen        gekennzeichnet,
 Zeilenumbrüche       werden auch mit dem          Element '''''br''''' erreicht.

p {
  max-width: 30em;
  white-space: pre-line
}

Dieser Text wird wie im Quelltext notiert dargestellt. Aufeinanderfolgende Leerzeichen bleiben nicht erhalten. Zeilenumbrüche bleiben erhalten. Ein automatischer Zeilenumbruch findet statt. Die Box ist mit einem Rahmen gekennzeichnet,
Zeilenumbrüche werden auch mit dem Element br erreicht.

p {
  max-width: 30em;
  white-space: pre-wrap
}

Dieser             Text wird wie im Quelltext notiert dargestellt.
Aufeinanderfolgende                 Leerzeichen bleiben erhalten.
                   Zeilenumbrüche bleiben erhalten. Ein automatischer Zeilenumbruch findet statt.
Die Box ist mit einem Rahmen        gekennzeichnet,
 Zeilenumbrüche       werden auch mit dem          Element '''''br''''' erreicht.

Zurück zu vertikale Ausrichtung |

Hoch zu CSS |

Vor zu Wortabstand